Observer
-通过Object.defineProperty包装为可订阅对象
Watcher
- 观察者模式，监听所有可订阅对象变化
Compile
- 将对指令、模板等进行解析
diff算法
- 同层比较，不会垮层级比较。深度优先
- 当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图
diff算法同层操作
- 同层，此节点是否被移除=》添加新的节点
- 属性是否改变=》旧属性改为新属性
- 文本内容改变=》旧内容改为新内容
- 节点要被整个替换=》结构完全不相同，移除整个替换
patch算法
- 先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode
- diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁
虚拟DOM：本质在JS和DOM之间做一个缓存
- virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构
- 用JS对象方式表示DOM树的结构，然后用这个树构建成一个真正的DOM树，插入到文档中
- 当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较（diff算法），记录两棵树的差异（生成一个patch对象）
- 把patch补丁对象更新到真正DOM树中
虚拟DOM中的三个属性
- tagName:标签名
- props：包含属性
- children: 表示该元素的children(数组)
原因：
- JS在浏览器中运行很快
- DOM渲染慢，耗费性能高
- 渲染真实DOM的开销是很大
- 如果直接渲染到真实dom上会引起整个dom树的重绘和重排
vuex存储总结
- vuex存储在内存中，单页面刷新后，会导致vuex中state数据丢失，初始化。
- localstorage以文件方式存储在本地
- sessionStorage会话存储，临时保存
- localStorage和sessionStorage只能存储字符串类型，对于复杂的对象类型采用JSON.stringify和JSON.parse方式处理
- vuex主要用于组件之间的传值，localStorage和sessionStorage则主要用于页面间的传值
- 持久性：vuex会在F5刷新之后清除，sessionStorage会在页面关闭之后清除，localStorage会永久存储（主动清空，或者过期）
graph TD
A --> B