浅析Proxy可以优化vue的数据监听机制问题及实现思路

我们首先来看vue2.x中的实现，为简单起见，我们这里不考虑多级嵌套，也不考虑数组

vue2.x中的实现

其本质是new watcher(data, key, callback)的方式，而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用object.defineproperty，。

class watcher{
  constructor(data, key, cb){
  }
}
//转换成可监听对象
function observe(data){
  new observer(data)
}
//修改数据的getter和setter
function definereactive(obj, key){
  let value = obj[key];
  object.defineproperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      return value;
    },
    set(newval){
      value = newval
    }
  })
}

observer的实现很简单

class observer {
  constructor(data){
    this.walk(data);
  }

  walk(data){
    for(var key in data) {
      // 这里不考虑嵌套的问题，否则的话需要递归调用walk
      definereactive(data, key)
    }
  }
}

现在怎么将watcher和getter/setter联系起来，vue的方法是添加一个依赖类：dep

class watcher{
  constructor(data, key, cb){
    this.cb = cb;
    dep.target = this; //每次新建watcher的时候讲给target赋值，对target的管理这里简化了vue的实现
    data[key];//调用getter，执行addsub, 将target传入对应的dep; vue的实现本质就是如此
  }
}
class dep {
  constructor(){
    this.subs = [];
  }
  addsub(sub){
    this.subs.push(sub);
  }
  notify(){
    this.subs.foreach(sub => sub.cb())
  }
}
function definereactive(obj, key){
  let value = obj[key];
  let dep = new dep(); //每一个属性都有一个对应的dep，作为闭包保存
  object.defineproperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      dep.addsub(dep.target)
      dep.target = null;
      return value;
    },
    set(newval){
      value = newval
      dep.notify();
    }
  })
}

以上就是vue的思路，vue3之所以要从新实现，主要有这几个原因：

1. object.defineproperty的性能开销。
2. definereactive一开始就要对要监听的对象所有属性都执行一遍，因为传统方法要将一个对象转换成可监听对象，只能如此。
3. 添加删除属性的问题。
4. 还有一点就是这个模块被耦合到了vue里面，新版本可以单独作为一个库来使用。

然后我们来看看同样的功能采用proxy会怎样实现。

proxy的实现

将一个对象转换成proxy的方式很简单，只需要作为参数传给proxy即可；

class watcher {
  constructor(proxy, key, cb) {
    this.cb = cb;
    dep.target = this;
    this.value = proxy[key];
  }
}
class dep {
  constructor(){
    this.subs = []
  }
  addsub(sub){
    this.subs.push(sub);
  }
  notify(newval){
    this.subs.foreach(sub => {
      sub.cb(newval, sub.value);
      sub.value = newval;
    })
  }
}
const observe = (obj) => {
  const deps = {};
  return new proxy(obj, {
    get: function (target, key, receiver) {
      const dep = (deps[key] = deps[key] || new dep);
      dep.target && dep.addsub(dep.target)
      dep.target = null;
      return reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
      const dep = (deps[key] = deps[key] || new dep);
      promise.resolve().then(() => {
        dep.notify(value);
      })
      return reflect.set(target, key, value, receiver);
    }
  });
}
var state = observe({x:0})
new watcher(state, 'x', function(n, o){
  console.log(n, o)
});
new watcher(state, 'y', function(n, o){
  console.log(n, o)
});
state.x = 3;
state.y = 3;

也许一开始我们只关心x和y，那么就不会对其他的属性做相应的处理，除非添加watcher，其他时间target都是null

总结

以上所述是小编给大家介绍的proxy可以优化vue的数据监听机制问题，希望对大家有所帮助