我們首先來看vue2.x中的實現(xiàn)，為簡單起見，我們這里不考慮多級嵌套，也不考慮數(shù)組

vue2.x中的實現(xiàn)

其本質(zhì)是new Watcher(data, key, callback)的方式，而在調(diào)用之前是先將data中的所有屬性轉(zhuǎn)化成可監(jiān)聽的對象, 其主要就是利用Object.defineProperty，。

class Watcher{  constructor(data, key, cb){  }}//轉(zhuǎn)換成可監(jiān)聽對象function observe(data){  new Observer(data)}//修改數(shù)據(jù)的getter和setterfunction defineReactive(obj, key){  let value = obj[key];  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get(){      return value;    },    set(newVal){      value = newVal    }  })}

Observer的實現(xiàn)很簡單

class Observer {  constructor(data){    this.walk(data);  }  walk(data){    for(var key in data) {      // 這里不考慮嵌套的問題，否則的話需要遞歸調(diào)用walk      defineReactive(data, key)    }  }}

現(xiàn)在怎么將watcher和getter/setter聯(lián)系起來，vue的方法是添加一個依賴類：Dep

class Watcher{  constructor(data, key, cb){    this.cb = cb;    Dep.target = this; //每次新建watcher的時候講給target賦值，對target的管理這里簡化了vue的實現(xiàn)    data[key];//調(diào)用getter，執(zhí)行addSub, 將target傳入對應的dep; vue的實現(xiàn)本質(zhì)就是如此  }}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之所以要從新實現(xiàn)，主要有這幾個原因：

Object.defineProperty的性能開銷。 defineReactive一開始就要對要監(jiān)聽的對象所有屬性都執(zhí)行一遍，因為傳統(tǒng)方法要將一個對象轉(zhuǎn)換成可監(jiān)聽對象，只能如此。 添加刪除屬性的問題。 還有一點就是這個模塊被耦合到了vue里面，新版本可以單獨作為一個庫來使用。

然后我們來看看同樣的功能采用Proxy會怎樣實現(xiàn)。

Proxy的實現(xiàn)

將一個對象轉(zhuǎn)換成Proxy的方式很簡單，只需要作為參數(shù)傳給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;