一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。
本题类型：综合题、开放问题
本题难度：⭐
答：
命令式框架更注重用代码实现功能的过程，声明式框架更注重展示给开发者的结果。
以前端框架为例，jQuery 就是典型的命令式框架，Vue 或者 React 就是典型的声明式框架。
比如要实现这么一个功能：
- 获取 id 为 app 的标签
- 把标签的文本内容设置为 'click me'
- 给标签添加点击事件，点击后弹出提示 'hello'
用 jQuery 来实现，就是这样的代码。
$('#app')
.text('click me')
.on('click', () => { alert('hello') })
用 Vue 来实现，就是这样的代码：
<div @click="alert('hello')">click me</div>
很明显，Vue 的代码看上去人更容易理解，非常直观，这就是声明式的代码，它只注重结果，至于过程是怎么实现的，那就是 Vue 内部的事情了，把困难的部分留给了框架自己，使用框架的人用起来就非常简单。
而 jQuery就是命令式的了，它更关注的是实现这个功能的过程，代码本身就是做事的过程，自然语言的描述能够与代码一一对应。
// 自然语言的描述能够与代码一一对应
$('#app') // 获取 id 为 app 的标签
.text('click me') // 把标签的文本内容设置为 'click me'
.on('click', () => { alert('hello') }) // 给标签添加点击事件，点击后弹出提示 'hello'
命令式代码和声明式代码，谁性能更好？
答：
命令式的代码性能更好。
比如上文的代码，要把 div 中的文本内容修改为 'click me1'。直接使用命令式代码操作：
div.textContent. = 'click me1'
有比上面这句代码性能更好的方式吗？答案是，没有。
命令式代码的性能就是最好的，知道要改什么，直接改就是了。
如果使用声明式的代码，看似只改了一个字符：
<div @click="alert('hello')">click me</div>
改为
<div @click="alert('hello')">click me1</div>
实际上，对于 Vue 这个框架内部来说，其实是做了很多事的，它需要找到前后的差异并只更新变化的地方，性能消耗远远不只表面看到的这一点。
Vue 内部做的这些工作，其实也是命令式的代码，毕竟框架本身就是封装了命令式代码才实现了面向开发者的声明式。
所以，结论是，命令式的代码在性能上优于声明式的代码。
那么问题来了，既然命令式的代码在性能上优于声明式的代码，为何 jQuery 逐渐要被淘汰了，而 Vue 却正在前端领域大放异彩呢？
答案是：声明式的代码可维护性更强、给开发者带来的心智负担更小
Vue 或者 React 能替代 jQuery 的很大一部分原因，就是他们让前端开发更简单。
写 jQuery 的时候，开发者需要维护实现功能的过程，需要自己维护元素的创建、更新和删除等逻辑。
但写 Vue 或者 React 时，就更关心结果，代码更加直观，至于实现功能的过程，全在框架内部。
在采用声明式代码提升可维护性的同时，一定会带来性能的损失，但是这样的损失是可以接受的，远小于维护大量代码带给开发者的心智负担。
事实上，我们很难写出性能极好的命令式代码，尤其是当项目的规模很大的时候，即使你写出了性能很好的代码，也一定是付出了极大的精力，投入产出比不高。
而如果直接使用 Vue 或者 React 开发项目，我们就可以坐享其成，享受前端领域最厉害的一群人的智慧结晶带给我们开发者的便利，何乐而不为呢？
结尾
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
你也可以关注《前端每日一问》这个专栏，防止失联哦～
我是阿林，输出洞见技术，再会！
本文参考：Vue.js设计与实现
上一篇：
下一篇：
