前言
更文活动又开始了，冲这奖品也得肝一肝，先给自己定个小目标，活动结束之前，先肝个7篇，完成个最基础的任务。
无奈，平时积累的文章不够，恰好，上个月读了一段时间《Vue.js设计与实现》，有整理部分笔记，先发几篇。
所以，后面几篇内容都是对这本书内容的整理总结
详细情况可以查看专栏学习理解《Vue.js设计与实现》
《Vue.js 设计与实现》是Vue.js官方团队成员 霍春阳 倾力打造，基于Vue.js3 深入解析Vue.js设计细节。
这本书一大特点就是贵，定价120，到手价格90。
设计框架里到处都体现了权衡的艺术
牛逼！！！
其实说人话就是 就是设计时的技术方案的选型，然后为什么选这个，不选那个，高大上一点就是 权衡。
命令式 和 声明式的权衡
视图层的框架一般分为 命令式和声明式。
命令式框架：如Jquery和原生js，更关注更改视图，修改dom的过程。
声明式框架：如vue,更关注结果，操作dom,修改dom的过程我们不用关心，vue去帮我们我们完成，我们只需要告诉框架我们需要什么样的东西
以一个操作dom的场景为例子
- 获取一个dom\
- 设置文本内容hello world\
- 为其绑定点击事件\
- 当点击时弹出ok
// jquery 实现 $('#app') // 获取div .text("hello world") // 设置文本内容 .on("click",()=>{ alert('ok') }) // 增加监听事件 // 原生js实现 const div = document.querySelector('#app') // 获取div div.innnerText = 'hello world' // 设置文本内容 div.addEventListner('clilk',() => { alert('ok') } }) // 增加监听事件 // vue 实现 <div @click="()=> alert('ok')">hello word</div>
命令式框架，更加符合人脑处理事情的思路，面向过程，一步一步去做。
声明式框架，更加傻瓜式一些，只需要告诉框架，我需要的结果，但是如果告诉框架，有框架自定义的一套规范，有学习成本和使用成本。
权衡之后，vue 决定按 一套 声明式框架来设计
性能与可维护的权衡
命令式框架的性能 优于 声明式的框架的性能
简单来说，就是jquery 性能优于 vue
当我们需要更新dom时
- 对于vue 框架来说，修改dom 需要先找到真实dom 和虚拟dom的差异，更新dom有差异的地方。
- 对于jquery 框架来说，修改dom 直接去修改就可以了。
vue 等声明式框架的更新性能消耗 = 直接修改的性能消耗 + 找出差异的性能消耗
jquery 等命令式框架的更新性能消耗 = 直接修改的性能消耗
所以说，jquery 性能优于 vue
当然了vue的可维护性更强，所以我们需要做的是，努力减小找出差异的性能消耗，这样就可以使vue的性能无限接近jquery
因此我们提出了虚拟dom,来最小化找出差异
虚拟DOM的性能
其实性能这个东西，很难直接说，好不好，没有对比就没有伤害
我们把它和原生js 修改dom 进行对比
虚拟dom 简单来讲它就是将HTML的DOM，用一套JS对象来表示。
为了更好的说明虚拟dom的性能，我们用innerHTML来比较。
innerHTML 是html5 提出的一个新的获取操作dom的方法。
不知道这个api的可以去查一查，活着看下我之前写的dom bom博客，
