Vue 认识神奇的虚拟dom

虚拟dom初步了解

• 虚拟 dom 全称是 virtual dom，可以简称 vdom
• vdom 是真实 dom 的映射，以 js 对象的形式模拟（存储）
• 当 vdom 中的节点改变时，会生成新的 dom 树

js对象如何模拟（存储）dom树

• 首先我们先来了解下 vdom 长什么样，举例 dom 结构如下

	
first
	
second

• 转换成 js 对象存储

{
	type: 'ul',  // 父节点标签
	props: {'class': 'list'},  // 父节点属性
	children: [ // 子节点
		{type: 'li', props: {}, children: ['first']},
		{type: 'li', props: {}, children: ['second']}
	]
}

• vue 中的 vdom 数据结构展示

const vNode = {
	tag: 'ul', // 父节点标签
	data: { // 父节点属性和绑定的事件
		class: 'list',
		on: {
			click () {}
		}
	},
	children: [ // 子节点
		{tag: li, ...},
		{tag: li, ...}
	]
}

vdom操作流程

1. 用 js 模拟 dom 树（vdom），然后将其构建成一个真正的 dom 树，插入到文档中
   • 生成真正的 dom 则要用到createElement、appendChild、removeChild 等 api，类似于在文档中插入一个节点
2. 当状态变更的时候，先重新模拟一个 vdom，然后对比前后 vdom 的区别（diff 算法），并记录差异
3. 把第 2 步记录的差异应用到步骤 1 所构建的真正 dom 上，视图就更新了

为什么用虚拟dom

先认识下 dom 渲染过程

• 构建 dom 树，构建 cssom 树，构建渲染树（这三步是同时进行的，而 css 样式越多，解析越慢，性能消耗越大）

说说好处

• 效率高：假设 js 要操作具体的 dom 十次，那么浏览器每一次都得重新渲染 dom 树，得不偿失。而 vdom 则可以先确定好哪些地方更改了，一次性渲染，dom更改的地方越多越能体现
• 可移植性：由于vdom本质只是一个js对象，所以可以渲染到dom以外的任何端
• 可维护性：掩盖了底层的dom操作，用更易懂的方式去描述过程，使得代码易维护