开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情”

框架设计编译时和运行时，命令式与声明式

什么是命令式和声明式

命令式：关注的是执行过程。 声明式： 关注的是执行结果。

需求: 给 id为app的app元素， 设置文本， 设置点击事件执行弹框

jQuery中实现

//找到元素
const element =  $('#app')
// 设置文本
element.text('hello world')
element.on('click', () => {
    alert('ok')
})

我们发现jQuery完完全全需求的直译。一步一步翻译成代码的。是典型的命令式框架。

vue中实现

vue会直接写完。因为vue中变量更新了UI也会更新。

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

vue就是声明式的代表直接结果，不关心实现过程，实现过程是vue做的事。更好维护。 jQuery出现问题可能在过程中的任何一步都有可能。

命令式和声明式性能

需求： 将id为app的元素改变文本

命令式

div.textContent = 'new text'

vue声明式

1. 将vue代码编译成 字典来描述
2. 对比字典找到文本差异。 (js层面操作)
3. 改变差异的部分。 div.textContent = 'new text'

两者对比发现多出了步骤1和2。步骤1是编译阶段的。所以运行阶段多出了找到文本差异的过程。

vue声明式性能 < 命令式性能。

模板代码更改innerHtml jquery开发中使用innerHtml作为模板引用。 此时的性能又如何呢。

命令式： 1. 销毁所有dom 2. 创建新的dom。 声明式： 1. 对比dom差异 2. 更新差异内容。

相对于创建新dom 更新差异部分性能不是一个lever的。此时声明式远高于命令式。

性能： innerHtml模板代码 < 虚拟dom < 非模板代码的命令式（原生js）。

总结： 原生js性能最好，虚拟dom其次。虚拟dom相较于原生js多的是js层面的对比性能消耗。 若要极致性能，需要投入巨大精力且很难写绝对优化的命令式代码 而vue则保证了应用的性能下限，性能不至于太差，甚至逼近命令式代码性能。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情”