短讯!命令式与声明式

2023-02-05 02:13:02   来源:哔哩哔哩


(资料图)

命令式

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

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

声明式

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

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

性能

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

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

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

可维护性

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

标签: 可以看出 也就是说 可维护性