对 “虚拟 DOM” 的理解

思路

1. 解释 vdom 是什么
2. 引⼊ vdom 的两大好处
3. 补充：如何⽣成 vdom
4. 补充：vdom 中 diff 中的作⽤

虚拟 DOM 是什么？

虚拟 DOM 本质是一个 js 对象，用来描述真实的 DOM 结构，相当于是对真实 DOM 做了一层抽象。

为什么需要虚拟 DOM？

引⼊虚拟 DOM 有 2 大好处：

1. 提升 DOM 渲染性能

   通过 js 对象的抽象来操作 DOM，可以有效地减少真实 DOM 的操作。

   并且，操作 js 对象比直接操作 DOM 容易的多，就比如可以通过 diff 算法 对 DOM 的更新进行比较，只将有差异的部分进行重新渲染。

2. ⽅便实现跨平台

   同⼀ VNode 节点可以渲染成不同平台上的对应的内容，⽐如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等。

   Vue3 中允许开发者基于 VNode 实现⾃定义渲染器（renderer），以便于针对不同平台进⾏渲染。

虚拟 DOM 如何生成的？

1. Vue 解析 <template>，转换为 AST（抽象语法树）。
2. AST 经过 代码生成，转换成 render() 渲染函数（返回 VNode）。
3. 执行 render() 生成 VNode（虚拟 DOM）。
4. Vue 通过 patch() 递归遍历 VNode，最终生成真实 DOM 并挂载到页面。
5. 后续，当响应式数据变化时，Vue 重新执行 render() 生成新的 VNode，经过 Diff 算法（基于 patch()）对比新旧 VNode，只更新必要的部分。

虚拟 DOM 如何做 diff 的？

1. 挂载结束后，会记录第一次生成的 VDOM(oldVNode)
2. 当响应式数据发生变化后，将会引起组件的重新渲染，此时就会生成新的 VDOM(newVNode)
3. 使用 oldVNode 与 newVNode 做 diff 操作，将更改的部分更新到真实 DOM 上，从而转换为最小量的真实 DOM 操作，高效更新视图。