(资料图)

命令式

命令式框架的特点是关注过程。以jQuery为例，若我们使用jQuery实现将div中的文字设置为hello word，并添加点击事件，代码为：

以上代码可以看出，代码的逻辑过程和我们的想法一一对应。

声明式

声明式框架得特点是关注结果。使用vue实现上面得代码为：

至于如何实现这个“结果”，我们并不关心，它由vue内容搞定，也就是说vue内部是命令式的，它帮我们封装了“过程”，而暴漏给使用者得是声明式的用法。

性能

先给出结论：声明式的代码性能不优于命令式代码性能。

若我们将上面例子中div的文字内容改为“hello vue3”，命令式代码如下：

以上代码可以看出，我们明确知道哪个元素的哪里发生了变更，但是声明式代码不一定能做到这一点，因为它需要找到变更前后的差异，并只更新变化的地方，也就是说声明式代码比命令式代码多出找差异的性能消耗，

可维护性

问题来了，在性能上命令式要优于声明式，为什么vue还要做声明式呢？原因在于声明式代码的可维护性更强。我们可以看出声明式代码只关注结果，不用再去写DOM元素的获取、更新、删除等操作，代码看上去更直观。