Virtual DOM 是真实 DOM 的映射
当虚拟 DOM 树中的某些节点改变时，会得到一个新的虚拟树。算法对这两棵树(新树和旧树)进行比较，找出差异，然后只需要在真实的 DOM 上做出相应的改变。
用 JS 对象模拟 DOM 树
用如下对象表示 DOM 元素
用普通 JS 字符串表示 DOM 文本节点
从 Virtual DOM 映射到真实 DOM
使用以’
$‘开头的变量表示真正的 DOM 节点(元素，文本节点)，因此 \$parent 将会是一个真实的 DOM 元素虚拟 DOM 使用名为
node的变量表示
比较两棵虚拟 DOM 树的差异
添加新节点，使用 appendChild(…) 方法添加节点
移除老节点，使用 removeChild(…) 方法移除老的节点
节点的替换，使用 replaceChild(…) 方法
添加新节点
移除老节点
节点的替换
比较子节点
当节点是 DOM 元素时我们才需要比较( 文本节点没有子节点 )
我们需要传递当前的节点的引用作为父节点
我们应该一个一个的比较所有的子节点，即使它是
undefined也没有关系，我们的函数也会正确处理它。最后是 index，它是子数组中子节点的 index
完整的代码
总结
设置元素属性(props)并进行 diffing/updating
处理事件——向元素中添加事件监听
让虚拟 DOM 与组件一起工作，比如 React
获取对实际 DOM 节点的引用
使用带有库的虚拟 DOM，这些库可以直接改变真实的 DOM，比如 jQuery 及其插件
完
推荐阅读：
文末彩蛋
扫码回复，" 2020 "，获得最新前端，后端，大数据，人工智能，PHP等视频教程资料云盘链接。
本文分享自微信公众号 - 前端迷社区（gh_c8466b051727）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。