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é)點

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

這是一段html

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

其對應(yīng)的虛擬節(jié)點如下：

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ù)中，通過執(zhí)行文本編譯后生成的render方法，會得到虛擬節(jié)點：

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

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

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

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

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

// 將實例中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ù)最終會遞歸的調(diào)用這些函數(shù)來得到虛擬節(jié)點，并將其返回：

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

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

將虛擬節(jié)點處理為真實節(jié)點

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

其代碼如下：

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

在patch方法中，會通過虛擬節(jié)點創(chuàng)建真實節(jié)點，并將真實節(jié)點插入頁面中：

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

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

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

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會生成的真實DOM元素el并返回，內(nèi)部會對子虛擬節(jié)點再次調(diào)用createElement來繼續(xù)生成真實元素，然后將生成的真實元素通過appendChild方法插入到父節(jié)點中。

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

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