1. 权衡的艺术

1.1 命令式和声明式

• 视图层框架通常分为命令式和声明式
• 命令式框架更加关注过程，声明式框架更加关注结果

1.2 性能与可维护性的权衡

先说结论：声明式代码的性能不优于命令式代码的性能

理论上命令式代码可以做到极致的性能优化，因为我们明确知道哪些发生了变更，只做必要的修改就行了，而声明式代码为了实现最优的更新性能，它需要找到前后的差异并只更新变化的地方

Vue.js 要选择声明式的原因就在于声明式代码的可维护性更强，框架设计者要做的就是在保持可维护性的同时让性能损失最小化

1.3 虚拟 DOM 的性能到底如何

• 采用虚拟 DOM 的更新技术的性能理论上不可能比原生 JavaScript 操作 DOM 更高
• 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。虚拟 DOM 是为了最小化找出差异这一步的性能消耗而出现的

innerHTML 和虚拟 DOM 在创建页面时，都需要新建所有 DOM 元素，无论是纯 JavaScript 层面的计算，还是 DOM 层面的计算，其实宏观上两者差距不大，但虚拟 DOM 在更新页面时只会更新必要的元素，而 innerHTML 需要全量更新，对于 innerHTML 来说，页面越大，就意味着更新时的性能消耗越大，这时虚拟 DOM 的优势就体现出来了

补充：涉及 DOM 的运算要远比 JavaScript 层面的计算性能差（DOM 运算涉及 页面渲染、访问 DOM 需要层级查找、DOM 操作引起页面重绘）

1.4 运行时和编译时

• 纯运行时：没有编译的过程，无法分析用户提供的内容
• 运行时 + 编译时：可以分析用户提供的内容，在编译的时候提取可变信息将其传递给 Render 函数做进一步的优化
• 纯编译时：直接编译成可执行的 JavaScript 代码，性能可能会更好，但是这种做法有损灵活性
• Vue.js 3 保持了运行时 + 编译时的架构，在保持灵活性的基础上能够尽可能地去优化性能