vue 插入dom_手写Vue源码(三) - 组件初渲染

源码地址: 传送门

在Vue进行文本编译之后，会得到代码字符串生成的render函数。本文会基于render函数介绍以下内容：

• 执行render函数生成虚拟节点
• 通过vm._update方法，将虚拟节点渲染为真实DOM

在vm.$mount方法中，文本编译完成后，要进行组件的挂载，代码如下：

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

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

下面详细介绍vm._render()和vm._update()中到底做了什么

生成虚拟节点

原生DOM节点拥有大量的属性和方法，操作DOM比较耗费性能。在Vue中通过一个对象来描述DOM中的节点，这个对象就是虚拟节点，Vue组件树构建的整个虚拟节点树就是虚拟DOM。

这是一段html

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

其对应的虚拟节点如下：