vnode 在 Vue 中的作用

vnode就是 Vue 中的 虚拟 dom 。
vnode 是怎么来的？
就是把 template 中的结构内容，通过 vue template complier 中的 render 函数（使用了 JS 中的 with 语法），来生成 template 中对应的 js 数据结构，举个例子：

<div id="div1" class="container"><p>vdom</p><ul style="font-size: 20px"><li>a</li></ul>
</div>

h 函数根据上面的模板内容就会生成下列 vdom:

{tag: 'div',props: {id: 'div1',class: 'container'},children:[{tag: 'p',children: 'vdom'},{tag: 'ul',props: {style: 'fontSize: 20px'},children:[{tag: 'li',children: 'a'}]}]
}

用 JS 模拟 DOM 结构，patch 到真实 DOM。

那么 vnode 的作用是什么呢？

1. 默认对 模板中的内容 通过render函数，生成vnode; 响应式的 getter 对使用到的变量做监听操作；
2. 修改data，和初始化的 模板 vnode 通过 diff 算法做对比，计算出最小的变更；
3. 重新执行 render 函数，生成新的vnode；
4. 通过 patch 补丁到初始化渲染的 dom 节点中

组件开发可不可以不用 template 呢
答案是可以的，vue 组件中可以使用 render 代替 template ；如下：

Vue.component('heading', {// template: `xxxx`,render: function (createElement) {return createElement('h' + this.level,[createElement('a', {attrs: {name: 'headerId',href: '#' + 'headerId'}}, 'this is a tag')])}
})

记录一下，回顾一下，如有不妥，望指正，thank you!