Part2

什么是虚拟 dom

虚拟 dom 就是个 js 对象，描述视图页面结构（对象上 VNode 可以看到树形结构）。

在 Vue 中每个组件有 render 函数，每个 render 函数都会返回虚拟 dom.

为什么需要虚拟 dom

组件在创建和数据/依赖更新时候会重新触发渲染，真实 dom 创建更新插入消耗性能，并且可能触发重排/重绘，性能开销巨大，降低渲染效率，引入就是为了解决渲染效率问题。

虚拟 dom 转为真实 dom

首先生成虚拟 dom 树，然后创建真实 dom，会将真实 dom 挂载到页面，并且二者相互对应。

当响应式数据变化会触发重新渲染，render 会被重新调用，会创建新的虚拟 dom 树，二者 patch 对比找到最小更新量，这里会直接抛弃旧树，使用新树，更新必要的真实 dom

模板和虚拟 dom 树

编译与其他相同，都是根据模板转成抽象语法树（AST），然后再转成 render 函数。

注：如果使用传统引入（就像 cdn 引入 react 要同时引入 babel 一样），会在组件第一次加载进行运行时编译。

如果使用打包（vite(rollup)/webpack），会进行模板预编译，可以提高运行时的性能，并且这样打包进去的 Vue 也就不再需要 compile 模块，可以减少打包体积

在 Vue 运行时候就已经是仅依靠 render 函数而不是原有的模板，其模板中的语法最终会编译为虚拟 dom 的配置