性能与可维护性的权衡(Vue设计方案的选择)

性能与可维护性的权衡

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

举一个例子

我们要将div标签文本内容修改为"coder_MX"，我们通过命令式的修改方式该怎样实现呢，很简单，我们只需要明确该修改为什么，直接调用相关的命令操作即可

div.textContent = 'coder_MX'

思考： 有没有比上面性能更好的代码实现？
答案：是没有的，因为无论任何的框架操作，都要进行如上的操作才能将div标签内的文案进行修改。

对于声明式框架，我们只能看到页面描述的改变

 <!-- 之前： -->
<div @click="() => alert('ok')">hello world</div>
 <!-- 之后： -->
<div @click="() => alert('ok')">hello vue3</div>

对于一个框架来说，为了实现最优的更新性能，它需要找到前后的差异并只更新变化的地方，但是最终完成这次更新的代码仍然是：

div.textContent = 'coder_MX'

下面我们看一个问题：

如果我们将直接修改消耗的性能定义为A,把找出差异的性能消耗定义为B，那么就有如下：

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

可以看到，命令式代码会比声明式代码消耗的性能低，尽管声明式的代码能把找出差异的性能消耗减小至0，也仅仅能追平命令式代码的消耗，因此可以得出一个结论，声明式代码的性能不优于命令式代码的性能.

那Vue.js为什么还要选择声明式的设计方案呢？

请不要把目光仅仅投放在命令时代码与声明式代码的性能消耗上，还有一个很重要的概念就是可维护性，从上面例的代码中我们也可以感受到，在采用命令式代码开发的时候，我们需要维护实现目标的整个过程，包括要手动完成 DOM 元素的创建、更新、删除等工作。而声明式代码展示的就是我们要的结果，看上去更加直观，至于做事儿的过程，并不需要我们关心，Vue.js都为我们封装好了。
这就体现了我们在框架设计上要做出的关于可维护性与性能之间的权衡。在采用声明式提升可维护性的同时，性能就会有一定的损失，而框架设计者要做的就是：在保持可维护性的同时让性能损失最小化。