目录

1.重要性 

2.虚拟DOM 背景

3.解决方案(vdom 原理)

4.用 JS 模拟 DOM 结构 

5.通过 snabbdom 学习 vdom（怎么用 vdom？）

6.snabbdom重点总结

7.vdom 总结

1.重要性 

• vdom 是实现 vue 和 react 的重要基石
• diff 算法是vdom中最核心，最关键的部分

2.虚拟DOM 背景

• DOM操作比较耗时，js 操作快 
• 以前用jQuery， 可以自行控制 DOM 操作的时机，手动调整
• Vue 和 React 是数据驱动视图，如何有效控制 DOM 操作？

3.解决方案(vdom 原理)

• 页面复杂度越来越高，想减少计算次数比较难
• 能不能把计算，更多的转移为 JS 计算？因为 JS 执行速度很快
• vdom - 用 JS 模拟 DOM 结构，计算出最小的变更，操作 DOM 

4.用 JS 模拟 DOM 结构 

vdom
a

5.通过 snabbdom 学习 vdom（怎么用 vdom？）

• 简洁强大的 vdom 库，易学易用
• Vue 参考它实现的 vdom 和 diff
• https://github.com/snabbdom/snabbdom
• Vue3.0 重写了 vdom 的代码，优化了性能
• 但 vdom 的基本理念不变，面试考点也不变
• React vdom 具体实现和 Vue 也不同，但不妨碍统一学习

6.snabbdom重点总结

• h 函数
• vnode 数据结构
• patch 函数

例子：

change

7.vdom 总结

• 用 JS 模拟 DOM 结构（vnode）
• 新旧 vnode 对比，得出最小的更新范围，最后更新 DOM
• 数据驱动视图的模式下，有效控制 DOM 操作 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！