双向绑定
2.0现有限制
- 无法检测到新属性的添加/删除
- 无法监听数组的变化
- 需要深度遍历,浪费内存
3.0 优化
- 允许框架拦截对象上的操作
- Proxy默认可以支持数组
- 多层对象嵌套,使用懒代理
核心:主要通过函数reactive()给对象新增一个Proxy对象监听内部的属性来实现数据监听。
解析: 通过observed = new Proxy(target,handle);给每个传入的target对象包一个Proxy对象,有操作时触发handle方法。
其中let toProxy = new WeakMap(),WeakMap是弱引用,key为对象,用于缓存代理的target,let toRaw = new WeakMap(),用于缓存observed,避免重复代理
handle方法中有get()和set(),get()中执行tack()依赖收集,set()中执行trigger()触发更新。
虚拟DOM
2.0DOM性能瓶颈
- 虽然Vue能够保证触发更新的组件最小化,但单个组件部分变化需要遍历该组件的整个vdom树
- 传统vdom性能跟模板大小正相关,跟动态节点的数量无关
3.0 优化
- 将AST基于动态节点指令(if,for,slot)切割为嵌套的区块
- 主动监测模板中的静态节点
- 给元素一天个追踪标记,无论层级嵌套多深,更新时可以直接遍历动态节点
Tree-Shaking
2.0 限制
框架的所有功能,并不是每个开发人员都会使用,但仍需下载/解析相应代码
3.0 优化
将大多数全局API和内部组件移至ES模块导出,tre-shaking更友好