0001命令式和声明式

命令式

命令式框架的一大特点就是关注过程

就如下面的代码,自然语言描述能够与代码产生一一对应的关系,代码本身描述的是"做事的过程",这符合我们的逻辑直觉

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

声明式

声明式框架更注重结果

如下面代码,可以实现上面代码相通的功能,我们只需要提供一个"结果",至于如何实现这个"结果",我们并不需要关心,交给

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

优缺点

命令式和声明式各有优缺点,在框架设计方面,则体现在性能与可维护之间的权衡.

比如当我们要将div标签的文本内容修改为hello vue3

命令式

使用命令式我们可以用以下代码实现

div.textContent = 'hello vue3'

声明式

使用声明式我们可以用以下代码实现,但是对于框架来说,为了实现最优的更新性能,他需要找到变化的地方,最终完成此次更新的代码还是上面的那串代码.

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

性能差异

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

命令式代码更新性能消耗: A

声明式代码更新性能消耗: A + B

所以就算最理想的情况下,即B的性能消耗为0,声明式的代码也只能于命令式的代码性能持平

总结

所以使用声明式代码是为了可维护性更强,但是在让可维护性变强的同时,性能就会有一定的损失,而框架设计者要做的就是,在保持可维护性的同时让损失最小化