博客

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!