Vuejs 设计与实现笔记（一） ​

Vuejs 等前端 MVVM 框架的出现其实是将我们从原来的命令式开发引入了声明式开发的情景中

编程方式的改变： ​

Vuejs 等前端 MVVM 框架的出现其实是将我们从原来的命令式开发引入了声明式开发的情景中：

命令式开发：主要关注的是过程，程序执行的每一个步骤都需要我们亲力亲为。例如我们要通过编辑输入内容来实时显示到页面上，那我们需要先得到两个元素，监听输入框，在监听函数中得到新的内容并设置到页面中。

声明式开发：主要关注结果就可以了，中间的实现过程将由框架接管。那么这时候我们要实现上面提到的案例的话我们只需要按框架提供的申明方式提前绑定到对应的元素上就可以了。

性能和可维护性的抉择： ​

声明式开发的代码性能往往并不优于命令式开发的代码。应为声明式的代码背后由框架的强大逻辑支撑，在框架处理过后在通过命名式的代码来最终实现。就比如说同样更新页面的文本，命名式就可以很简单的直接更新，但声明式将必须经过框架的 diff 过程得到差异的部分，在将差异的内容渲染到页面中。

在实际的业务场景中实现往往是复杂的，大量的命名式代码将不利于我们对项目的维护，所以从这一点就体现出了声明式代码的优点，虽然现在还充斥着 JQ 无所不能的话语，但是 MVVM 的的编程模式也是大势所趋。

虚拟 DOM 的引入： ​

声明式的代码和命令式的代码性能相差的就是 diff 的过程，将 diff 的时间缩短到极致就使得声明式的代码性能达到最优。在实际的开发中极致的命令式代码的编写将付出比声明式开大更多的精力来换取更优的性能，这往往是不太明智的。

innerHTML 作为更新 DOM 元素的一种方式在实际的处理过程中将 JavaScript 中拼装的 html 片段赋值后还会经过新 dom 的解析和渲染，DOM 解析的性能相对比 JavaScript 来说将是很差的。

const html = `<div><span>...</span></div>`

// dom解析&渲染
div.innerHTML = html;

const html = `<div><span>...</span></div>`

// dom解析&渲染
div.innerHTML = html;

虚拟 DOM 的做用就是将 dom 的结构进行对象化，这个对象就叫做虚拟 DOM，当使用虚拟 DOM 来实现上述的代码效果时其实性能的优势并不明显，主要的特点体现在 DOM 更新的时候，innerHTML 需要将内部的 dom 全部卸载后重新渲染费时费力，虚拟 DOM 在 JavaScript 代码中进行 diff 工作，虽然多做了一步操作但相比 DOM 的全量解析将是很划算的，最后也只是将改变化的 DOM 插入回去。