Vue 原理解析(四)： 虚拟Dom是怎么生成的

虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真实dom的一个描述。 一个真实的dom 也无非是有标签名， 属性， 子节点等这些来描述它，demo如下：

真实Dom

<div id="app">
  <span>Vue!</span>
</div>

虚拟dom

{
  tag: 'div',
  attr:{
     id:'app'
  },
  children: [
    {
      tag: 'span',
      children: [
        {
          text: Vue!
        }
      ]
    }
  ],
}

我们可以在Render 函数里这样描述它：

new Vue({
  render(h) {
    return h('div', {
      attrs: {
        id: 'app',
      }
    }, [
      h('span', { children: [
        {
          text: Vue!
        } 
      ]} )
    ]
   )    
  }
})

开始挂载阶段

this._init() 方法的最后：

... 初始化

if (vm.$options.el) {    // 开始挂载
  vm.$mount(vm.$options.el)
}

参考链接 https://blog.csdn.net/chenzhizhuo/article/details/101205637