简单介绍一下虚拟DOM和diff算法
需求
方法一：拆了重建
方法二：diff
主要内容
snabbdom简介和测试环境搭建
snabbdom简介
-
snabbdom是瑞典语单词，单词原意“速度”；
-
snabbdom 是著名的虚拟DOM 库，是diff 算法的鼻祖，Vue 源码借鉴了snabbdom ；
-
官方git ：snabbdom
安装snabbdom
-
在git 上的snabbdom 源码是用TypeScript写的，git 上并不提供编译好的JavaScript 版本；
-
如果要直接使用build出来的JavaScript 版的snabbdom库，可以从npm上下载：
npm i -S snabbdom -
学习库底层时，建议大家阅读原汁原味的TS代码，最好带有库作者原注释，这样对你的源码阅读能力会有很大的提升。
snabbdom测试环境搭建
-
snabbdom 库是DOM库，不能在nodejs环境运行，所以需要搭建webpack和webpack-dev-server开发环境，不需要安装任何loader
-
这里需要注意，必须安装最新版webpack@5，不能安装webpack@4，因为webpack4中没有读取exports的能力
npm i -S webpack@5 webpack-cli@3 webpack-dev-server@3 -
参考webpack官网，书写好webpack.config.js文件
跑通官方git首页的demo程序
-
跑通snabbdom官方git首页的demo程序，即证明调试环境已经搭建成功
-
不要忘记在index.html中放置一个div#container
虚拟DOM和h函数
虚拟DOM类似于mustache中的token
diff是发生在虚拟DOM上的
课程不研究DOM如何变成虚拟DOM
研究内容
-
虚拟函数如何被渲染函数（h函数）产生？
手写h函数
-
diff算法原理？
手写diff算法
-
虚拟DOM如何通过diff变为真正的DOM的
事实上，虚拟DOM变回真正的DOM是涵盖在diff算法里面的
虚拟函数如何被渲染函数（h函数）产生？
h函数用来产生虚拟节点
h函数用来产生虚拟节点(vnode)
比如这样会调用h函数
将得到这样的虚拟节点
{
"sel": "a",
"data": {
props: {
href: "http://www.atguigu.com"
}
},
"text": "尚硅谷"
}
它表示的真正DOM节点
一个虚拟节点都有哪些属性
{
children: undefined, // 子元素
data: {}, // 属性、样式
elm: undefined, // 对应真正DOM节点，如果为undefined，表示该节点还未上树
key: undefined, // 节点唯一标识
sel: "div", // 选择器
text: "我是一个盒子" // 文字
}