命令式和声明式相关知识

命令式和声明式

从范式来看，视图层框架通常分为命令式和声明式。

命令式：关注过程
声明式：关注结果

1. 命令式：关注过程。比如jQuery就是典型的命令式框架，例如，我们把下面这段话翻译成对应的代码：

01 - 获取 id 为 app 的 div 标签
02 - 它的文本内容为 hello world
03 - 为其绑定点击事件
04 - 当点击时弹出提示：ok

对应的代码为：

01 $('#app') // 获取 div
02   .text('hello world') // 设置文本内容
03   .on('click', () => { alert('ok') }) // 绑定点击事件

以上就是 jQuery 的代码示例，我们也可以用原生 JavaScript来实现同样的功能：

01 const div = document.querySelector('#app') // 获取 div
02 div.innerText = 'hello world' // 设置文本内容
03 div.addEventListener('click', () => { alert('ok') }) // 绑定点击事件

可以看到，自然语言描述 能够与代码产生 一一对应的关系，代码本身描述的是“做事的过程”，这符合我们的逻辑直觉。

1. 声明式：关注结果。比如Vue.js。结合Vue.js，我们来看看如何实现上面自然语言描述的功能：

01 <div @click="() => alert('ok')">hello world</div>

这段 类 HTML 的模板就是 Vue.js 实现如上功能的方式。
可以看到，我们提供的是一个“结果”，至于如何实现这个“结果”，我们并不关心，
这就像我们在告诉 Vue.js：“嘿，Vue.js，看到没，我要的就是一个 div，文本内容是 hello world，它有个事件绑定，你帮我搞定吧。”
至于实现该“结果”的过程，则是由 Vue.js 帮我们完成的。换句话说，Vue.js 帮我们封装了过程。因此，我们能够猜到 Vue.js 的内部实现一定是命令式的，而暴露给用户的却更加声明式。

命令式和声明式的优缺点

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

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

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

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

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

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

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

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

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

声明式代码会比命令式代码多出找出差异的性能消耗，
因此最理想的情况是，当找出差异的性能消耗为 0 时，声明式代码与命令式代码的性能相同，但是无法做到超越，毕竟框架本身就是封装了命令式代码才实现了面向用户的声明式。这符合前文中给出的性能结论：声明式代码的性能不优于命令式代码的性能。

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