這篇文章將為大家詳細(xì)講解有關(guān)vue中是如何進(jìn)行渲染，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)專(zhuān)業(yè)成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、軟文發(fā)稿等專(zhuān)業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專(zhuān)業(yè)設(shè)計(jì)制作為您帶來(lái)效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

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

全局組件解析原理

為了保證組件的隔離，每個(gè)組件通過(guò)extend方法產(chǎn)生一個(gè)新的類(lèi)，去繼承父類(lèi)。并把用戶(hù)通過(guò)Vue.component方法傳入的 opts 合并到 vue.options.components，再vue初始化時(shí)合并Vue.options.components 和 vm.$options.components 。

1.Vue.component 方法

Vue.options._base = Vue; //可以通過(guò)\_base 找到 vue
Vue.options.components = {}; 

Vue.component = function (id, definition) {
  //每個(gè)組件產(chǎn)生一個(gè)新的類(lèi)去繼承父親
  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 的類(lèi)，并且他身上應(yīng)該有父類(lèi)的所有功能。

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)了全局組件的解析。

下面我們?cè)賮?lái)康康組件如何渲染的吧？

組件的渲染原理

在創(chuàng)建虛擬節(jié)點(diǎn)時(shí)我們要通過(guò)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)，通過(guò)data上有無(wú)hook來(lái)區(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)) {
   //返回組件對(duì)應(yīng)的真實(shí)節(jié)點(diǎn)
   return vnode.componentInstance.$el;
  }
  vnode.el = document.createElement(tag); // 虛擬節(jié)點(diǎn)會(huì)有一個(gè)el屬性,對(duì)應(yīng)真實(shí)節(jié)點(diǎn)
  children.forEach((child) => {
   vnode.el.appendChild(createElm(child));
  });
 } else {
  vnode.el = document.createTextNode(text);
 }
 return vnode.el;
}

createComponent 通過(guò) data上是否有hook.init方法，判斷是否組件虛擬節(jié)點(diǎn)

是的話則調(diào)用組件上 data.hook.init

創(chuàng)建組件實(shí)例，并賦值給vnode.componentInstance

vnode.componentInstance 有值說(shuō)明對(duì)應(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é)

對(duì)組件進(jìn)行 new 組件().$mount() => vm.$el

將組件的$el 插入到父容器中 (父組件)

關(guān)于vue中是如何進(jìn)行渲染就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：vue中是如何進(jìn)行渲染-創(chuàng)新互聯(lián)
URL鏈接：http://www.chinadenli.net/article46/ideeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、定制開(kāi)發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)