权衡的艺术

命令式和声明式

Vue.js 内部实现是命令式的，而暴露给用户的是声明式。

视图层框架通常分为命令式和声明式，命令式的代码描述的是“做事的过程”，声明式的更加关注结果。

Vue 帮我们封装了过程，我们直接使用了它提供的模版语法。

性能与可维护性的权衡

声明式代码的性能不优于命令式代码的性能。声明式代码的可维护性更强。因此，在框架设计方面，我们可以在性能与可维护性之间做权衡。

命令式代码的更新性能消耗 = A

声明式代码的更新性能消耗 = B + A

B 为找出差异的性能。理想情况下，B 为 0 时，这两个范式的性能相同，但是声明式的性能无法超越命令式的性能。

框架设计者要做的就是：在保持可维护性的同时让性能损失最小化。

虚拟 DOM 的性能到底如何

为了最小化这个 B，我们引入虚拟 DOM 这个概念。

虚拟 DOM 是真实 DOM 的一个轻量级拷贝，它存在于内存中。当我们对页面做出改变时，Vue 首先在虚拟 DOM上 进行操作，而不是直接修改真实 DOM，这样，操作的开销就会小很多。

可以把虚拟 DOM 工作流程简单理解为像是在草稿纸上修改内容一样，一通操作后再把确定下来的结果高效地应用到真实 DOM 中，减少了重绘和重排。

运行时和编译时

编译时：

在 Vue 框架中，编译时是指 Vue 的模板编译器会将模板解析成抽象语法树（AST），然后将其编译成渲染函数（render function）的过程。
渲染函数的作用是根据应用的数据生成一个虚拟 DOM 树。虚拟 DOM 树是一个用 JavaScript 对象表示的树型结构，描述了页面的结构和内容。

运行时：

运行时是在用户浏览器中实际执行的阶段，Vue 利用渲染函数生成虚拟 DOM，并通过渲染器（renderer）将虚拟 DOM 转换成真实 DOM 的过程。
补充：渲染器是 Vue 运行时的核心部分。

补充阅读：Vue.js 3 的设计思路

框架类型

纯运行时框架	依赖 Render 函数，开发者提供树型结构的虚拟 DOM 数据对象，框架直接根据这个数据对象渲染页面。不包含编译阶段，所有逻辑都在运行时处理。
运行时 + 编译时 框架	在上面的基础上，再实现一个编译器 Compiler。 编译器将模板中的 HTML 字符串编译成虚拟 DOM 数据对象的生成逻辑（渲染函数）。 在运行时，框架执行渲染函数时生成虚拟 DOM 并更新页面。 Vue 框架是典型的运行时 + 编译时框架。
纯编译时框架	只有 编译器 Compiler，没有运行时的虚拟 DOM。 编译器在编译阶段将 HTML 字符串直接编译成可执行的命令式代码，这些代码在浏览器中直接操作 DOM。因为不需要运行时的虚拟 DOM 层，这种框架可以在运行时更高效地操作页面。 Svelte 框架就是纯编译时框架。

文章参考：《Vue.js设计与实现》霍春阳著