小记： 本章 主要了解命令式、声明式、性能与可维护性的权衡、虚拟Dom的性能、运行时和编译时。Vue就是通过权衡这几种方式的优缺点进行框架设计

  1. 命令式、声明式
    1. 　对比
      框架对比命令式声明式
      特点只关注过程只关注结果
      优点性能最高心智负担小，维护性高
      优缺点　　心智负担大、维护性差性能较高
      代码对比
      给div实现点击事件      		const div = document.querySelector(‘#app’)
      div.addEventListener(‘click’, () => { alert(‘绑定OK’) })
      alert(‘ok’)”>点我
  2. 性能与可维护性进行权衡

　　　　　　结论 ：声明式代码的性能不优于命令式代码的性能

　　　　　　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 性能 非常高
　　　　　　　　灵活性差