proxy 数据帧听

vue3 的响应式编程，数据拦截方案采用proxy 实现。

 

基础版

　　proxy只实现了对象顶层的数据监听。子项监听需要我们自己实现。 demo所示设置a2的值时，proxy会触发一次对a1的get，并不会触发set操作。

const data = { 
  a1: {
    a2: 1,
  },
};

const obj = new Proxy(data, {
  get: function(target, prop, receiver) {
    const res = Reflect.get(target, prop, receiver);
    console.log('get', res);
    return res;
  },
  set: function(target, prop, value, receiver) {
    console.log('set', prop, value);
    // 缺省行为时返回默认操作
    return Reflect.set(target, prop, value, receiver);
  },
});　

 

升级版

递归对每一层创建代理

const defaultData = { 
  a1: {
    a2: 1,
	},
};

function createGetter(data){
	return new Proxy(data, {
    get: function(target, prop, receiver) {
      const res = Reflect.get(target, prop, receiver);
      console.log('get', res);
      if (typeof a === 'object') {
      	return createGetter(res);
      }
      return res;
    },
    set: function(target, prop, value, receiver) {
      console.log('set', prop, value);
      // 缺省行为时返回默认操作
      return Reflect.set(target, prop, value, receiver);
    },
	});
}

const obj = createGetter(defaultData);

obj.a1.a2 = 2;
// get {a2: 1}
// set a2 2

　　

Object.defineProperty 对比 Proxy

• Proxy 可以直接监听对象而非属性；
• Proxy 可以直接监听数组的变化；

• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。