第一章 权衡的艺术

1.1命令式和声明式

jquery是命令式，关注过程，jquery是针对简化dom而产生的。
vue是声明式，关注实现，简单来说就像在命令式的基础上再对标签进行了一次封装。

1.2性能与可维护性的权衡

理论上，声明式在在性能上是不能超过命令式的。
在声明式的部分，是无法做到内部命令式的部分操作的，vue把命令的部分交给了自己的源码，用户只需要操作自己想要的即可，提升了开发效率。
声明式不需要我们关心DOM元素的创建更新删除，之所以性能不如命令式，在于面向用户的声明式要找出差异消耗的性能。

声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗

1.3虚拟DOM的性能到底如何

虚拟DOM创建页面的性能 = 创建JavaScript对象的计算量 + 创建真实DOM的计算量

虚拟DOM如何创建渲染页面？
创建虚拟DOM树 -> 比较差异 -> 更新真实DOM树 -> 边界条件检查

例如使用innerHTML更新页面时，虚拟DOM在JavaScript层面的运算要比创建页面时多出了一个Diff性能的消耗；DOM层面的运算，虚拟DOM在更新页面时只会更新必要的元素，但innerHTML需要全量更新，此时虚拟DOM的优势得以体现。

影响虚拟DOM的性能因素和影响innerHTML的性能因素不同。对于虚拟DOM来说，无论页面多大，都只会更新变化的内容，但对于innerHTML来说，页面越大，意味更新的性能消耗越大。

1.4运行时和编译时

设计框架时有三种选择：纯运行时，运行时+编译时，纯编译时
(1)纯运行时
举例：创建一个render函数，该函数根据树形结果的数据对象递归的将数据渲染成DOM元素，对象中有两个属性，分别为tag和children，当我们在浏览器中运行代码时，可以看到我们预期遍历出来的内容。这样的编写代码的过程就是一个纯运行时的框架。
(2)运行时+编译时
像第一种手写树形结构太麻烦，可以用HTML标签的方式编译成树形结构对象，继续使用render函数，这时我们的框架就变成了运行时+编译时的框架。
(3)纯编译时
既然编译器可以把HTML字符串编译成数据对象，也就能直接编译成命令式代码，可以通过document.createdElement('div')这种方式直接编译成命令式代码，此时这就是纯编译时的框架。

1.5总结

命令式和声明式的差异，一个关注过程，一个关注结果。
虚拟DOM的性能，声明式的更新性能消耗=找出差异的性能消耗+直接修改的性能消耗。虚拟DOM的意义在于使找出差异的性能消耗最小化。
Vue.js是一个编译时+运行时的框架，在它保持灵活的基础上，还能通过编译手段分析用户提供的内容，从而进一步提升更新性能。