为了更好的研究Virtual DOM，我选择了snabbdom来学习。相比Vue来说，snabbdom对于研究虚拟DOM更好，因为它里面没有其他干扰的东西，而且源码也比较少，因此研究起来更方便。
1. 初次体验虚拟DOM的魅力
首先我们先用snabbdom重写之前的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<!-- 引入snabbdom相关库 -->
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
<script type="text/javascript">
var snabbdom = window.snabbdom;
//init patch function
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]);
// 定义h函数
var h = snabbdom.h;
var container = document.getElementById('container');
var data = [{
name: "张三",
age: 24,
address: "深圳"
}, {
name: "张三",
age: 24,
address: "深圳"
}, {
name: "张三",
age: 24,
address: "深圳"
}];
var oldVnode;
function render(data) {
var vnode = h('ul#list', {}, data.map(function (item) {
return h('li', {}, item.name+' '+item.age+' '+item.address)
}))
if (!oldVnode) {
//初始化页面渲染
patch(container, vnode);
} else {
//对比原来的vnode和新生成的vnewnode,找出差异,只渲染修改的部分
patch(oldVnode, vnode);
}
oldVnode = vnode;
}
$('#btn-change').click(function () {
data[1].name = '李四';
data[2].name = '王五';
//修改后重新渲染
render(data);
})
render(data); //初始化页面渲染
</script>
</body>
</html>
点击change,发现只修改了有差异的地方。对比之前jquery清空整个div,性能上有很大提升，特别是在复杂应用上。
2. 实现原理
通过上面snabbdom的例子，我们发现有两个核心的API:
1. h函数（将真实dom映射成虚拟节点）；
h('<html 标签名>'，{属性}，[children])//含有子节点的
h('<html 标签名>'，{属性}，'text'])//没有子节点，只有文本，如<p>this is VN</p>
2. patch函数（通过对比新旧虚拟节点，找出差异（diff算法），再把这些变化更新到真实dom中）
patch(container, vnode)//初次渲染
patch(oldVnode, newVnode); //re-render