什么是Vue.js的虚拟DOM？如何工作？

Vue.js 使用虚拟 DOM 进行高效的 DOM 操作。它是 Vue.js 最独特的功能之一。

什么是虚拟 DOM ?
虚拟 DOM 是一棵以 JavaScript 对象作为节点的树。它用来映射真实 DOM。

虚拟 DOM 的工作过程:

1. 当状态变更时,Vue.js 重新渲染整个组件树的虚拟 DOM。
2. 然后 Vue.js 通过对新老虚拟 DOM 树作对比,计算出真实 DOM 中需要变更的内容。
3. 最后,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 的优势:

1. 性能更优:通过虚拟 DOM 比较,避免频繁操作真实 DOM,提高效率。
2. 减少内存消耗:虚拟 DOM 是内存中的 JavaScript 对象,比 DOM 对象更轻量。
3. 跨平台:在服务端渲染、Weex等可以复用。

但是,虚拟 DOM 仍需要转换为真实 DOM,会有一定性能损耗。所以 Vue 3 中引入了新一代 DOM 编译器 Vue Fast Dom,可以更快地执行 DOM 操作。