Vue.js 使用虚拟 DOM 进行高效的 DOM 操作。它是 Vue.js 最独特的功能之一。
什么是虚拟 DOM ?
虚拟 DOM 是一棵以 JavaScript 对象作为节点的树。它用来映射真实 DOM。
虚拟 DOM 的工作过程:
- 当状态变更时,Vue.js 重新渲染整个组件树的虚拟 DOM。
- 然后 Vue.js 通过对新老虚拟 DOM 树作对比,计算出真实 DOM 中需要变更的内容。
- 最后,Vue.js 精准更新真实 DOM。
例如有这样的 HTML:
html
<p>Hello</p>
<p>World</p>
其虚拟 DOM 可以表示为:
js
const oldVDOM = {
tag: 'p',
text: 'Hello'
}
{
tag: 'p',
text: 'World'
}
当我们将第一个 p 改为 Hi 时,得到新的虚拟 DOM:
js
const newVDOM = {
tag: 'p',
text: 'Hi'
}
{
tag: 'p',
text: 'World'
}
Vue.js 对比新旧虚拟 DOM,得到需要变更的元素,然后仅更新真实 DOM 中对应的 p 元素。
虚拟 DOM 的优势:
- 性能更优:通过虚拟 DOM 比较,避免频繁操作真实 DOM,提高效率。
- 减少内存消耗:虚拟 DOM 是内存中的 JavaScript 对象,比 DOM 对象更轻量。
- 跨平台:在服务端渲染、Weex等可以复用。
但是,虚拟 DOM 仍需要转换为真实 DOM,会有一定性能损耗。所以 Vue 3 中引入了新一代 DOM 编译器 Vue Fast Dom,可以更快地执行 DOM 操作。