网站手机网页如何做,中石油技术开发公司网站,自适应网站如何做移动适配,茶叶红酒网站建设Virtual DOM#xff08;虚拟DOM#xff09; 就是由普通的 JS 对象来描述DOM对象#xff0c;因为不是真实的DOM对象#xff0c;所以叫 Virtual DOM。 虚拟DOM就是使用一个虚拟的 DOM 树来描述真实的 DOM 树结构和节点属性#xff0c;通过比较新旧两颗虚拟 DOM 树的差异虚拟DOM 就是由普通的 JS 对象来描述DOM对象因为不是真实的DOM对象所以叫 Virtual DOM。 虚拟DOM就是使用一个虚拟的 DOM 树来描述真实的 DOM 树结构和节点属性通过比较新旧两颗虚拟 DOM 树的差异最终只需要对修改的部分进行实际的 DOM 操作。
使用步骤
虚拟DOM就是将当前页面的 DOM 树映射为一个 JavaScript 对象形式的虚拟 DOM。 然后当应用程序状态发生改变时根据新状态生成一个新的虚拟 DOM。 比较新旧两个虚拟 DOM 的差异得到需要进行修改的 DOM 元素。 根据差异列表对有修改的 DOM 元素进行实际的 DOM 操作使浏览器重新渲染。
二、真实DOM和虚拟DOM对比 通过打印一个真实DOM的成员div的属性发现一个DOM对象div的成员非常多所以创建一个DOM对象的成本是非常高的。
三、为什么使用 Virtual DOM
1.手动操作 DOM 比较麻烦还需要考虑浏览器兼容性问题。 2.虽然有 jQuery 等库简化 DOM 操作并解决了兼容性问题。 3.但是随着项目的复杂DOM操作复杂提升既要考虑操作数据又要考虑操作 DOM。 4.为了简化 DOM 的复杂操作于是出现了各种 MVVM框架MVVM 框架解决了视图和状态的同 步问题也就是 当数据发生变化自动更新视图 当视图发生变化自动更新数据 过去为了简化视图的操作可以使用模板引擎。但是模板引擎没有解决跟踪状态变化的问题即当数据发生变化的时候无法获取上一次的状态。只好把页面中的元素删除然后重新创建。无法最小范围更新视图。于是 Virtual DOM 出现了。
5.Virtual DOM 的好处是当状态改变时不需要立即更新 DOM只需要创建一个虚拟 DOM 树来描述 DOM
6.Virtual DOM 内部将弄清楚如何有效diff的更新 DOM。 7.内部使用 diff 算法找到状态的差异只更新变化的部分。 原创作者吴小糖 创作时间2024.3.19
