快捷導(dǎo)航

Vue手寫(xiě)實(shí)現(xiàn)組件初渲染

更新時(shí)間：2022年08月15日 10:40:40 作者：夏日

這篇文章主要介紹了Vue手寫(xiě)實(shí)現(xiàn)組件初渲染，在Vue進(jìn)行文本編譯之后，會(huì)得到代碼字符串生成的render函數(shù)，本文會(huì)基于render函數(shù)展開(kāi)主題相關(guān)內(nèi)容，感興趣的朋友可以參考一下

前言

在Vue進(jìn)行文本編譯之后，會(huì)得到代碼字符串生成的render函數(shù)。本文會(huì)基于render函數(shù)介紹以下內(nèi)容：

執(zhí)行render函數(shù)生成虛擬節(jié)點(diǎn)
通過(guò)vm._update方法，將虛擬節(jié)點(diǎn)渲染為真實(shí)DOM

在vm.$mount方法中，文本編譯完成后，要進(jìn)行組件的掛載，代碼如下：

Vue.prototype.$mount = function (el) {
  // text compile code ....
  mountComponent(vm);
};

// src/lifecycle.js
export function mountComponent (vm) {
  vm._update(vm._render());
}

下面詳細(xì)介紹vm._render()和vm._update()中到底做了什么

生成虛擬節(jié)點(diǎn)

原生DOM節(jié)點(diǎn)擁有大量的屬性和方法，操作DOM比較耗費(fèi)性能。在Vue中通過(guò)一個(gè)對(duì)象來(lái)描述DOM中的節(jié)點(diǎn)，這個(gè)對(duì)象就是虛擬節(jié)點(diǎn)，Vue組件樹(shù)構(gòu)建的整個(gè)虛擬節(jié)點(diǎn)樹(shù)就是虛擬DOM。

這是一段html

<div id="app">
  <span>hello world {{name}}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        name: 'zs'
      }
    }
  })
</script>

其對(duì)應(yīng)的虛擬節(jié)點(diǎn)如下：

const vNode = {
  tag: 'div',
  props: { id: 'app' },
  key: undefined,
  children: [
    {
      tag: 'span',
      props: {},
      key: undefined,
      children: undefined,
      text: 'helloworldzs'
    }
  ],
  text: undefined
}

在Vue.prototype._render函數(shù)中，通過(guò)執(zhí)行文本編譯后生成的render方法，會(huì)得到虛擬節(jié)點(diǎn)：

// src/vdom/index.js
Vue.prototype._render = function () {
  const vm = this;
  // 執(zhí)行選項(xiàng)中的render方法，指定this為Vue實(shí)例
  const { render } = vm.$options;
  return render.call(vm);
};

而render函數(shù)中用到了_c,_v,_s這些方法，需要在Vue.prototype上添加這些方法，在render函數(shù)內(nèi)就可以通過(guò)實(shí)例調(diào)用它們：

// 創(chuàng)建虛擬節(jié)點(diǎn)
function vNode (tag, props, key, children, text) {
  return {
    tag,
    props,
    key,
    children,
    text
  };
}

// 創(chuàng)建虛擬元素節(jié)點(diǎn)
function createVElement (tag, props = {}, ...children) {
  const { key } = props;
  delete props.key;
  return vNode(tag, props, key, children);
}

// 創(chuàng)建虛擬文本節(jié)點(diǎn)
function createTextVNode (text) {
  return vNode(undefined, undefined, undefined, undefined, text);
}

// 將實(shí)例中data里的值轉(zhuǎn)換為字符串
function stringify (value) {
  if (value == null) {
    return '';
  } else if (typeof value === 'object') {
    return JSON.stringify(value);
  } else {
    return value;
  }
}

export function renderMixin (Vue) {
  Vue.prototype._c = createVElement;
  Vue.prototype._v = createTextVNode;
  Vue.prototype._s = stringify;
  // some code ...  
}

_render函數(shù)最終會(huì)遞歸的調(diào)用這些函數(shù)來(lái)得到虛擬節(jié)點(diǎn)，并將其返回：

const vNode = vm.createVElement('div', { id: 'app' },
  vm.createVElement('span', undefined,
    vm.createTextVNode('hello') + vm.createTextVNode('world') + vm.stringify(vm.name)
  )
)

在生成虛擬節(jié)點(diǎn)的過(guò)程中，會(huì)從組件實(shí)例vm中取值，從而觸發(fā)對(duì)應(yīng)屬性的get/set方法。

將虛擬節(jié)點(diǎn)處理為真實(shí)節(jié)點(diǎn)

在通過(guò)Vue.prototype._render函數(shù)生成虛擬節(jié)點(diǎn)后，在Vue.prototype._update方法中會(huì)利用虛擬節(jié)點(diǎn)，替換當(dāng)前頁(yè)面上渲染的元素app。

其代碼如下：

// src/lifecycle.js
export function lifecycleMixin (Vue) {
  Vue.prototype._update = function (vNode) {
    const vm = this;
    patch(vm.$el, vNode);
  };
}

在patch方法中，會(huì)通過(guò)虛擬節(jié)點(diǎn)創(chuàng)建真實(shí)節(jié)點(diǎn)，并將真實(shí)節(jié)點(diǎn)插入頁(yè)面中：

// src/vdom/patch.js
export function patch (oldVNode, vNode) {
  // 將虛擬節(jié)點(diǎn)創(chuàng)建為真實(shí)節(jié)點(diǎn)，并插入到dom中
  const el = createElement(vNode);
  // 獲取到老節(jié)點(diǎn)的父節(jié)點(diǎn)
  const parentNode = oldVNode.parentNode;
  // 將新節(jié)點(diǎn)插入到老節(jié)點(diǎn)之后
  parentNode.insertBefore(el, oldVNode.nextSibling);
  // 刪除老節(jié)點(diǎn)
  parentNode.removeChild(oldVNode);
}

createElement中是用虛擬節(jié)點(diǎn)生成真實(shí)節(jié)點(diǎn)的邏輯：

通過(guò)document.createElement來(lái)創(chuàng)建元素節(jié)點(diǎn)
元素節(jié)點(diǎn)通過(guò)updateProperties方法來(lái)設(shè)置它的屬性
通過(guò)document.createTextNode來(lái)創(chuàng)建文本節(jié)點(diǎn)

function createElement (vNode) {
  if (typeof vNode.tag === 'string') {
    vNode.el = document.createElement(vNode.tag);
    updateProperties(vNode);
    for (let i = 0; i < vNode.children.length; i++) {
      const child = vNode.children[i];
      vNode.el.appendChild(createElement(child));
    }
  } else {
    vNode.el = document.createTextNode(vNode.text);
  }
  return vNode.el;
}

createElement會(huì)生成的真實(shí)DOM元素el并返回，內(nèi)部會(huì)對(duì)子虛擬節(jié)點(diǎn)再次調(diào)用createElement來(lái)繼續(xù)生成真實(shí)元素，然后將生成的真實(shí)元素通過(guò)appendChild方法插入到父節(jié)點(diǎn)中。

執(zhí)行createElement最后得到的el是將所有子節(jié)點(diǎn)都插入到內(nèi)部的元素，但其實(shí)el此時(shí)還是脫離真實(shí)DOM存在的，最后將它插入到真實(shí)DOM中便完成了整個(gè)真實(shí)節(jié)點(diǎn)的渲染。

下面是其執(zhí)行邏輯示意圖：