每日阅读20240513

1. 2性能与可维护性的权衡

        命令式和声明式各有优缺点，在框架设计方面，则体现在性能与 可维护性之间的权衡。这里我们先抛出一个结论：声明式代码的性能 不优于命令式代码的性能。

        还是拿上面的例子来说，假设现在我们要将 div 标签的文本内容 修改为 hello vue3，那么如何用命令式代码实现呢？很简单，因为 我们明确知道要修改的是什么，所以直接调用相关命令操作即可：

        01 div.textContent = 'hello vue3' // 直接修改

        现在思考一下，还有没有其他办法比上面这句代码的性能更好？ 答案是“没有”。可以看到，理论上命令式代码可以做到极致的性能优 化，因为我们明确知道哪些发生了变更，只做必要的修改就行了。但 是声明式代码不一定能做到这一点，因为它描述的是结果：

        对于框架来说，为了实现最优的更新性能，它需要找到前后的差 异并只更新变化的地方，但是最终完成这次更新的代码仍然是：01 div.textContent = 'hello vue3' // 直接修改

如果我们把直接修改的性能消耗定义为 A，把找出差异的性能消 耗定义为 B，那么有： 命令式代码的更新性能消耗 = A声明式代码的更新性能消耗 = B + A 可以看到，声明式代码会比命令式代码多出找出差异的性能消 耗，因此最理想的情况是，当找出差异的性能消耗为 0 时，声明式代 码与命令式代码的性能相同，但是无法做到超越，毕竟框架本身就是 封装了命令式代码才实现了面向用户的声明式。这符合前文中给出 的性能结论：声明式代码的性能不优于命令式代码的性能。

        既然在性能层面命令式代码是更好的选择，那么为什么 Vue.js 要 选择声明式的设计方案呢？原因就在于声明式代码的可维护性更强。 从上面例子的代码中我们也可以感受到，在采用命令式代码开发的时候，我们需要维护实现目标的整个过程，包括要手动完成 DOM 元素 的创建、更新、删除等工作。而声明式代码展示的就是我们要的结 果，看上去更加直观，至于做事儿的过程，并不需要我们关心，Vue.js都为我们封装好了。

        这就体现了我们在框架设计上要做出的关于可维护性与性能之间 的权衡。在采用声明式提升可维护性的同时，性能就会有一定的损 失，而框架设计者要做的就是：在保持可维护性的同时让性能损失最 小化。