文章詳情頁

vue組件是如何解析及渲染的？

瀏覽：3日期：2022-10-11 08:32:24

前言

本文將對vue組件如何解析以及渲染做一個講解。

我們可以通過Vue.component注冊全局組件，之后可以在模板中進行使用

<div id='app'> <my-button></my-button></div><script> Vue.component('my-button', { template: '<button> 按鈕組件</button>', });let vm = new Vue({el:’#app’});</script>全局組件解析原理

為了保證組件的隔離，每個組件通過extend方法產生一個新的類，去繼承父類。并把用戶通過Vue.component方法傳入的 opts 合并到 vue.options.components，再vue初始化時合并Vue.options.components 和 vm.$options.components 。

1.Vue.component 方法

Vue.options._base = Vue; //可以通過_base 找到 vueVue.options.components = {}; Vue.component = function (id, definition) { //每個組件產生一個新的類去繼承父親 definition = this.options._base.extend(definition); console.log('1.給組件創造一個構造函數，基于Vue', definition); this.options.components[id] = definition; };2.Vue.extend 方法

extend 方法就是產生一個繼承于 Vue 的類，并且他身上應該有父類的所有功能。

import {mergeOptions} from ’../util/index’Vue.extend = function (definition) { const Vue = this; const Sub = function VueComponent(options) { this._init(options); }; Sub.prototype = Object.create(Vue.prototype); Sub.prototype.constructor = Sub; Sub.options = mergeOptions(Vue.options, definition); return Sub; };3.屬性合并

合并Vue.options 和 Vue.component(definition)傳入的 definition

strats.components = function (parentVal, childVal) { let options = Object.create(parentVal); if (childVal) { for (let key in childVal) { options[key] = childVal[key]; } } return options;};4.初始化合并

合并Vue.options.components 和 vm.$options.components

Vue.prototype._init = function (options) { const vm = this; ++ vm.$options = mergeOptions(vm.constructor.options, options); //... initState(vm); if (vm.$options.el) { //將數據掛載到這個模版上 vm.$mount(vm.$options.el); } };

好噠，到這里我們就實現了全局組件的解析。

下面我們再來康康組件如何渲染的吧？

組件的渲染原理

在創建虛擬節點時我們要通過isReservedTag 判斷當前這個標簽是否是組件，普通標簽的虛擬節點和組件的虛擬節點有所不同,如果 tag 是組件應該渲染一個組件的 vnode。

export function isReservedTag(str) { let reservedTag = 'a,div,span,p,img,button,ul,li'; return reservedTag.includes(str);}1.創建組件虛擬節點

createComponent 創建組件的虛擬節點，通過data上有無hook來區分是否為組件

export function createElement(vm, tag, data = {}, ...children) { // 如果tag是組件應該渲染一個組件的vnode if (isReservedTag(tag)) { return vnode(vm, tag, data, data.key, children, undefined); } else { const Ctor = vm.$options.components[tag] return createComponent(vm, tag, data, data.key, children, Ctor); }}// 創建組件的虛擬節點, 為了區分組件和元素 data.hook function createComponent(vm, tag, data, key, children, Ctor) { // 組件的構造函數 if(isObject(Ctor)){ Ctor = vm.$options._base.extend(Ctor); // Vue.extend } data.hook = { // 等會渲染組件時需要調用此初始化方法 init(vnode){ let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // new Sub 會用此選項和組件的配置進行合并 vm.$mount(); // 組件掛載完成后會在 vnode.componentInstance.$el } } return vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children})}2.創建組件的真實節點

typeof tag === 'string'，有可能是組件的虛擬節點，則調用createComponent。

export function patch(oldVnode,vnode){ // 1.判斷是更新還是要渲染 if(!oldVnode){ return createElm(vnode); }else{ // ... }}function createElm(vnode) { let { tag, data, children, text, vm } = vnode; if (typeof tag === 'string') { if (createComponent(vnode)) { //返回組件對應的真實節點 return vnode.componentInstance.$el; } vnode.el = document.createElement(tag); // 虛擬節點會有一個el屬性,對應真實節點 children.forEach((child) => { vnode.el.appendChild(createElm(child)); }); } else { vnode.el = document.createTextNode(text); } return vnode.el;}

createComponent 通過 data上是否有hook.init方法，判斷是否組件虛擬節點

是的話則調用組件上 data.hook.init

創建組件實例，并賦值給vnode.componentInstance

vnode.componentInstance 有值說明對應組件的真實 dom 已經生成

function createComponent(vnode) { let i = vnode.data; if((i = i.hook) && (i = i.init)){ i(vnode); } if(vnode.componentInstance){ return true; }}

調用init方法，創造組件的實例并該進行掛載

data.hook = { init(vnode){ let child = vnode.componentInstance = new Ctor({}); child.$mount(); // 組件的掛載 }}小結