vue組件是如何解析及渲染的？
前言
本文將對vue組件如何解析以及渲染做一個(gè)講解。
我們可以通過Vue.component注冊全局組件，之后可以在模板中進(jìn)行使用
<div id="app">
<my-button></my-button>
</div>
<script>
Vue.component("my-button", {
template: "<button> 按鈕組件</button>",
});
let vm = new Vue({
el:'#app'
});
</script>
全局組件解析原理
為了保證組件的隔離，每個(gè)組件通過extend方法產(chǎn)生一個(gè)新的類，去繼承父類。并把用戶通過Vue.component方法傳入的 opts 合并到 vue.options.components，再vue初始化時(shí)合并Vue.options.components 和 vm.$options.components 。
1.Vue.component 方法
Vue.options._base = Vue; //可以通過\_base 找到 vue
Vue.options.components = {};
Vue.component = function (id, definition) {
//每個(gè)組件產(chǎn)生一個(gè)新的類去繼承父親
definition = this.options._base.extend(definition);
console.log("1.給組件創(chuàng)造一個(gè)構(gòu)造函數(shù)，基于Vue", definition);
this.options.components[id] = definition;
};
2.Vue.extend 方法
extend 方法就是產(chǎn)生一個(gè)繼承于 Vue 的類，并且他身上應(yīng)該有父類的所有功能。
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) {
//將數(shù)據(jù)掛載到這個(gè)模版上
vm.$mount(vm.$options.el);
}
};
好噠，到這里我們就實(shí)現(xiàn)了全局組件的解析。
下面我們再來康康組件如何渲染的吧？
組件的渲染原理
在創(chuàng)建虛擬節(jié)點(diǎn)時(shí)我們要通過isReservedTag 判斷當(dāng)前這個(gè)標(biāo)簽是否是組件，普通標(biāo)簽的虛擬節(jié)點(diǎn)和組件的虛擬節(jié)點(diǎn)有所不同,如果 tag 是組件 應(yīng)該渲染一個(gè)組件的 vnode。
export function isReservedTag(str) {
let reservedTag = "a,div,span,p,img,button,ul,li";
return reservedTag.includes(str);
}
1.創(chuàng)建組件虛擬節(jié)點(diǎn)
createComponent 創(chuàng)建組件的虛擬節(jié)點(diǎn)，通過data上有無hook來區(qū)分是否為組件
export function createElement(vm, tag, data = {}, ...children) {
// 如果tag是組件 應(yīng)該渲染一個(gè)組件的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);
}
}
// 創(chuàng)建組件的虛擬節(jié)點(diǎn), 為了區(qū)分組件和元素 data.hook
function createComponent(vm, tag, data, key, children, Ctor) {
// 組件的構(gòu)造函數(shù)
if(isObject(Ctor)){
Ctor = vm.$options._base.extend(Ctor); // Vue.extend
}
data.hook = { // 等會(huì)渲染組件時(shí) 需要調(diào)用此初始化方法
init(vnode){
let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // new Sub 會(huì)用此選項(xiàng)和組件的配置進(jìn)行合并
vm.$mount(); // 組件掛載完成后 會(huì)在 vnode.componentInstance.$el
}
}
return vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children})
}
2.創(chuàng)建組件的真實(shí)節(jié)點(diǎn)
typeof tag === "string"，有可能是組件的虛擬節(jié)點(diǎn)，則調(diào)用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)) {
//返回組件對應(yīng)的真實(shí)節(jié)點(diǎn)
return vnode.componentInstance.$el;
}
vnode.el = document.createElement(tag); // 虛擬節(jié)點(diǎn)會(huì)有一個(gè)el屬性,對應(yīng)真實(shí)節(jié)點(diǎn)
children.forEach((child) => {
vnode.el.appendChild(createElm(child));
});
} else {
vnode.el = document.createTextNode(text);
}
return vnode.el;
}
createComponent 通過 data上是否有hook.init方法，判斷是否組件虛擬節(jié)點(diǎn)
是的話則調(diào)用組件上 data.hook.init
創(chuàng)建組件實(shí)例，并賦值給vnode.componentInstance
vnode.componentInstance 有值說明對應(yīng)組件的真實(shí) dom 已經(jīng)生成
function createComponent(vnode) {
let i = vnode.data;
if((i = i.hook) && (i = i.init)){
i(vnode);
}
if(vnode.componentInstance){
return true;
}
}
調(diào)用init方法，創(chuàng)造組件的實(shí)例并該進(jìn)行掛載
data.hook = {
init(vnode){
let child = vnode.componentInstance = new Ctor({});
child.$mount(); // 組件的掛載
}
}
小結(jié)
對組件進(jìn)行 new 組件().$mount() => vm.$el
將組件的$el 插入到父容器中 (父組件)
就完成啦～
以上就是vue組件是如何解析及渲染的？的詳細(xì)內(nèi)容，更多關(guān)于vue 組件解析和渲染的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過點(diǎn)擊空白頁面來讓彈窗隱藏,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue使用mounted和created時(shí),this無法指向data中的數(shù)據(jù)問題
這篇文章主要介紹了Vue使用mounted和created時(shí),this無法指向data中的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實(shí)現(xiàn)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開我們就來實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下2023-10-10
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08