浅析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();
 }
 })
}