Vue3的Proxy

104 阅读1分钟

Object.defineProperty的缺点

  1. 深度监听需要一次性递归;(监听时直接一次性全部递归)
  2. 无法监听新增属性/删除属性(Vue.set/Vue.delete);
  3. 无法原生监听数组,需要特殊处理;

Proxy实现响应式

  1. Reflect的参数和API与Proxy一致(Reflect.get/Reflect.set/Reflect.deleteProperty);
  2. Reflect规范化、标准化、函数化
  3. 代替Object上的工具函数 (eg:获取一个对象的key:原生:object.getOwnPropertyNames(obj) Vue3:Reflect.ownKeys(obj))
  4. 并非一次性递归监听,在get时才进行递归,data中的数据如果多层级,一步一步获取再递归,获取不到便不会主动递归,性能提升;

Proxy实现响应式的优点

  1. 深度监听,性能更好;
  2. 可监听 新增/删除 属性;
  3. 可监听数组变化;
  4. Proxy能规避 Object.defineProperty的问题;
  5. Proxy无法兼容所有浏览器,无法polyfill