第一章、权衡的艺术
小记： 本章 主要了解命令式、声明式、性能与可维护性的权衡、虚拟Dom的性能、运行时和编译时。Vue就是通过权衡这几种方式的优缺点进行框架设计
- 命令式、声明式
- 对比
框架对比 命令式 声明式 特点 只关注过程 只关注结果 优点 性能最高 心智负担小，维护性高 优缺点 心智负担大、维护性差 性能较高 代码对比
给div实现点击事件const div = document.querySelector('#app')
div.addEventListener('click', () => { alert('绑定OK') })<div @click="()=>alert('ok')">点我</div> - 性能与可维护性进行权衡
结论 ：声明式代码的性能不优于命令式代码的性能
a. 在命令式代码中我们修改某个元素或者内容，直接操作即可 ： div.textContent = ' hello'
b. 在Vue中，修改某个元素的属性或内容，我们得先找到前后的差异，并更新差异 （这个地方可了解diff）
上述性能对比：
记： A = 直接修改性能得消耗， B = 寻找差异得性能消耗
那么 a = A b = A+B
上述验证符合我们得结论
Vue为啥用声明式呢？
主要原因就是声明式代码的可维护性强，所以在权衡可维护性和性能时，Vue要做的就是在保证可维护性得同时让代码的性能损失最小
3. 虚拟DOM的性能到底如何
1. 先了解一下 innerHtml 的性能
innerHtml 在创建的过程中将一串模板字符串解析为Dom树
虚拟DOM创建页面的过程分为两步
创建JS对象==》真实DOM的描述
递归遍历虚拟DOM并创建真实DOM
在上述前提下，我们会觉得innerHtml性能会和虚拟DOM差不多
当涉及大量元素修改的时候，innerHtml每次都得销毁所有DOM重新渲染，而虚拟DOM只需要查找不一样的进行渲染
综上。innerHtml的性能是与数据量有关系的，而虚拟DOM与数据变化量有关
2.innerHtml、 虚拟DOM、元素JS性能对比
| innerHtml 模板 | 虚拟DOM | 原生Js |
| 心智负担中等 | 心智负担小 | 心智负担大 |
| 性能差 | 性能不错 | 性能高 |
| 可维护性差 | 可维护性强 | 可维护性差 |
注： 涉及DOM层面的计算要比JS层面的计算性能要差的多
4. 运行时、编译时
结论 Vue3.js是一个运行时加编译时的框架， 在保证灵活的前提下，通过分析用户提供的内容尽可能提升性能
1. 运行时：
每一个元素编译之后都是一个js对象 tag children
我们直接创建这样的对象进行reder渲染 称为运行时框架
2. 运行时+ 编译时
我们创建html 在调用compiler编译 在用render渲染
消耗性能
3. 编译时
用户直接将html编译为命令式代码 直接操作dom 性能 非常高
灵活性差