声明式框架与命令式框架

首先我们得了解声明式框架和命令式框架的区别

命令式框架关注过程

JQuery就是典型的命令式框架

例如我们来看如下一段代码

$( "button.continue" ).html( "Next Step..." ).on('click', () => { alert('next') })

这段代码的含义就是先获取一个类名为continue的button元素，它的内容为 Next Step...，并为它绑定一个点击事件。可以看到自然语言描述与代码是一一对应的，这更符合我们做事的逻辑

声明式框架更关注结果

现有的Vue，React都是典型的声明式框架

接着来看一段Vue的代码

<button class="continue" @click="() => alert('next')">Next Step...</button>

这是一段类HTML模板，它更像是直接提供一个结果。至于怎么实现这个结果，就交给Vue内部来实现，开发者不用关心

性能比较

首先告诉大家结论：声明式代码性能不优于命令式代码性能

即：声明式代码性能 <= 命令式代码性能

为什么会这样呢？

还是拿上面的代码举例

假设我们要将button的内容改为 pre Step，那么命令式的实现就是：

button.textContent = "pre Step"

很简单，就是直接修改

声明式的实现就是：

<!--之前 -->
<button class="continue" @click="() => alert('next')">Next Step...</button>
<!--现在 -->
<button class="continue" @click="() => alert('next')">pre Step</button>

对于声明式框架来说，它需要找到更改前后的差异并只更新变化的地方。但是最终更新的代码仍然是

button.textContent = "pre Step"

假设直接修改的性能消耗为 A， 找出差异的性能消耗为 B，
那么就有：

命令式代码的更新性能消耗 = A
声明式代码的更新性能消耗 = A + B

可以看到声明式代码永远要比命令式代码要多出找差异的性能消耗
那既然声明式代码的性能无法超越命令式代码的性能，为什么我们还要选择声明式代码呢？这就要考虑到代码可维护性的问题了。当项目庞大之后，手动完成dom的创建，更新与删除明显需要更多的时间和精力。而声明式代码框架虽然牺牲了一点性能，但是大大提高了项目的可维护性，降低了开发人员的心智负担
那么，有没有办法能同时兼顾性能和可维护性呢？
有！那就是使用虚拟dom

虚拟Dom

首先声明一个点，命令式代码只是理论上会比声明式代码性能高。因为在实际开发过程中，尤其是项目庞大之后，开发人员很难写出绝对优化的命令式代码。
而Vue框架内部使用虚拟Dom + 内部封装Dom元素操作的方式，能让我们不用付出太多精力的同时，还能保证程序的性能下限，甚至逼近命令式代码的性能
在讨论虚拟Dom的性能之前，我们首先要说明一个点：JavaScript层面的计算所需时间要远低于Dom层面的计算所需时间 看过浏览器渲染与解析机制的同学应该很明白为什么会这样。
我们在使用原生JavaScript编写页面时，很喜欢使用innerHTML，这个方法非常特殊，下面我们来比较一下使用虚拟Dom和使用innerHTML的性能差异