Vue 虚拟dom与diff算法，入门级理解

虚拟dom：用js模拟dom结构

简单的流程为：数据改变 → 虚拟dom开始计算变更 → 根据变更结果操作对应dom → 视图改变
虚拟dom的操作始终会在真实dom之前

js是如何表达dom的

//html结构树：
<div class="container">
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</div>
//js来表达以上结构（vnode，虚拟dom）：
{
	tag:'div',
	props:{
		className:'container'
	},
	chindren:[{
		tag:'ul',
		children:[{
			tag:'li',
			children:'1'
		},{
			tag:'li',
			children:'2'
		}]
	}]
}

为什么要使用虚拟dom：

dom操作的性能浪费： 如jquery操作

// 当对一个div下的内容进行替换时，dom会重新渲染，即使内容一样也会被替换 例如
<div id="capture">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>
//js代码
var html = '<div>1</div><div>2</div><div>3</div>'
$("#capture").html(html) 
//浏览器打开控制台查看页面可发现，即使内容一样，id=capture下的html也被重新渲染了一次 因此浪费性能

关于diff算法：用最小的代价更新dom，即没有属性变化的，不更新，有属性变化的，更新，diff算法的步骤：

1、初始化页面是JavaScript会初始化dom树
2、状态变更时，JavaScript会重新构造一个dom树
3、两个树对比差异，把差异改变在真正的dom树上，视图更新