声明式框架和命令式框架

最近读了霍春阳大佬的《vue.js设计与实现》，里面提到了有关声明式框架和命令式框架的一些概念，根据它的介绍，加上我网上找的资料，在我自己理解的基础上，写下了这篇文章

声明式框架

早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。例如，我们把下面这段话翻译成对应的代码：

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

对应的代码为：

1
2
3

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

可以看到，自然语言描述能够与代码产生一一对应的关系，代码本身描述的是“做事的过程”，这符合我们的逻辑直觉。那么，什么是声明式框架呢？与命令式框架更加关注过程不同，声明式框架更加关注结果。结合 Vue.js，我们来看看如何实现上面自然语言描述的功能：

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

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

简单总结：命令式更加关注过程，而声明式更加关注结果。命令式在理论上可以做到极致优化，但是用户要承受巨大的心智负担；而声明式能够有效减轻用户的心智负担，但是在性能上有一定的牺牲。