Object.defineProperty的缺点
- 深度监听需要一次性递归;(监听时直接一次性全部递归)
- 无法监听新增属性/删除属性(Vue.set/Vue.delete);
- 无法原生监听数组,需要特殊处理;
Proxy实现响应式
- Reflect的参数和API与Proxy一致(Reflect.get/Reflect.set/Reflect.deleteProperty);
- Reflect规范化、标准化、函数化
- 代替Object上的工具函数 (eg:获取一个对象的key:原生:object.getOwnPropertyNames(obj) Vue3:Reflect.ownKeys(obj))
- 并非一次性递归监听,在get时才进行递归,data中的数据如果多层级,一步一步获取再递归,获取不到便不会主动递归,性能提升;
Proxy实现响应式的优点
- 深度监听,性能更好;
- 可监听 新增/删除 属性;
- 可监听数组变化;
- Proxy能规避 Object.defineProperty的问题;
- Proxy无法兼容所有浏览器,无法polyfill