面試官問：監(jiān)聽一個(gè)變量的變化，需要怎么做

監(jiān)聽一個(gè)變量的變化，當(dāng)變量變化時(shí)執(zhí)行某些操作，這類似現(xiàn)在流行的前端框架（例如 React、Vue等）中的數(shù)據(jù)綁定功能，在數(shù)據(jù)更新時(shí)自動(dòng)更新 DOM 渲染，那么如何實(shí)現(xiàn)數(shù)據(jù)綁定喃？

本文給出兩種思路：

• ES5 的 Object.defineProperty
• ES6 的 Proxy

ES5 的 Object.defineProperty

Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象

——MDN

Object.defineProperty(obj, prop, descriptor)

其中：

• obj ：要定義屬性的對(duì)象
• prop ：要定義或修改的屬性的名稱或 Symbol
• descriptor ：要定義或修改的屬性描述符

var user = { 
    name: 'sisterAn' 
}

Object.defineProperty(user, 'name', {
    enumerable: true,
    configurable:true,
    set: function(newVal) {
        this._name = newVal 
        console.log('set: ' + this._name)
    },
    get: function() {
        console.log('get: ' + this._name)
        return this._name
    }
})

user.name = 'an' // set: an
console.log(user.name) // get: an

如果是完整的對(duì)變量的每一個(gè)子屬性進(jìn)行監(jiān)聽：

// 監(jiān)視對(duì)象
function observe(obj) {
   // 遍歷對(duì)象，使用 get/set 重新定義對(duì)象的每個(gè)屬性值
    Object.keys(obj).map(key => {
        defineReactive(obj, key, obj[key])
    })
}

function defineReactive(obj, k, v) {
    // 遞歸子屬性
    if (typeof(v) === 'object') observe(v)
    
    // 重定義 get/set
    Object.defineProperty(obj, k, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('get: ' + v)
            return v
        },
        // 重新設(shè)置值時(shí)，觸發(fā)收集器的通知機(jī)制
        set: function reactiveSetter(newV) {
            console.log('set: ' + newV)
            v = newV
        },
    })
}

let data = {a: 1}
// 監(jiān)視對(duì)象
observe(data)
data.a // get: 1
data.a = 2 // set: 2

通過 map 遍歷，通過深度遞歸監(jiān)聽子子屬性

注意， Object.defineProperty 擁有以下缺陷：

• IE8 及更低版本 IE 是不支持的
• 無法檢測(cè)到對(duì)象屬性的新增或刪除
• 如果修改數(shù)組的 length （ Object.defineProperty 不能監(jiān)聽數(shù)組的長(zhǎng)度），以及數(shù)組的 push 等變異方法是無法觸發(fā) setter 的

對(duì)此，我們看一下 vue2.x 是如何解決這塊的？

vue2.x 中如何監(jiān)測(cè)數(shù)組變化

使用了函數(shù)劫持的方式，重寫了數(shù)組的方法，Vue 將 data 中的數(shù)組進(jìn)行了原型鏈重寫，指向了自己定義的數(shù)組原型方法。這樣當(dāng)調(diào)用數(shù)組 api 時(shí)，可以通知依賴更新。如果數(shù)組中包含著引用類型，會(huì)對(duì)數(shù)組中的引用類型再次遞歸遍歷進(jìn)行監(jiān)控。這樣就實(shí)現(xiàn)了監(jiān)測(cè)數(shù)組變化。

對(duì)于數(shù)組而言，Vue 內(nèi)部重寫了以下函數(shù)實(shí)現(xiàn)派發(fā)更新

// 獲得數(shù)組原型
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// 重寫以下函數(shù)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  // 緩存原生函數(shù)
  const original = arrayProto[method]
  // 重寫函數(shù)
  def(arrayMethods, method, function mutator (...args) {
  // 先調(diào)用原生函數(shù)獲得結(jié)果
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    // 調(diào)用以下幾個(gè)函數(shù)時(shí)，監(jiān)聽新數(shù)據(jù)
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // 手動(dòng)派發(fā)更新
    ob.dep.notify()
    return result
  })
})

vue2.x 怎么解決給對(duì)象新增屬性不會(huì)觸發(fā)組件重新渲染的問題

受現(xiàn)代 JavaScript 的限制 ( Object.observe 已被廢棄)，Vue 無法檢測(cè)到對(duì)象屬性的添加或刪除。

由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。

vm.$set()實(shí)現(xiàn)原理

export function set(target: Array<any> | Object, key: any, val: any): any {
  // target 為數(shù)組
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改數(shù)組的長(zhǎng)度, 避免索引>數(shù)組長(zhǎng)度導(dǎo)致 splice() 執(zhí)行有誤
    target.length = Math.max(target.length, key);
    // 利用數(shù)組的 splice 方法觸發(fā)響應(yīng)式
    target.splice(key, 1, val);
    return val;
  }
  // target 為對(duì)象, key 在 target 或者 target.prototype 上 且必須不能在 Object.prototype 上,直接賦值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  // 以上都不成立, 即開始給 target 創(chuàng)建一個(gè)全新的屬性
  // 獲取 Observer 實(shí)例
  const ob = (target: any).__ob__;
  // target 本身就不是響應(yīng)式數(shù)據(jù), 直接賦值
  if (!ob) {
    target[key] = val;
    return val;
  }
  // 進(jìn)行響應(yīng)式處理
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

• 如果目標(biāo)是數(shù)組,使用 vue 實(shí)現(xiàn)的變異方法 splice 實(shí)現(xiàn)響應(yīng)式
• 如果目標(biāo)是對(duì)象,判斷屬性存在,即為響應(yīng)式,直接賦值
• 如果 target 本身就不是響應(yīng)式,直接賦值
• 如果屬性不是響應(yīng)式,則調(diào)用 defineReactive 方法進(jìn)行響應(yīng)式處理

ES6 的 Proxy

眾所周知，尤大大的 vue3.0 版本用 Proxy 代替了defineProperty 來實(shí)現(xiàn)數(shù)據(jù)綁定，因?yàn)?Proxy 可以直接監(jiān)聽對(duì)象和數(shù)組的變化，并且有多達(dá) 13 種攔截方法。并且作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化。

Proxy

Proxy 對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）

— MDN

const p = new Proxy(target, handler)

其中：

• target ：要使用 Proxy 包裝的目標(biāo)對(duì)象（可以是任何類型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理）
• handler ：一個(gè)通常以函數(shù)作為屬性的對(duì)象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理 p 的行為

var handler = {
    get: function(target, name){
        return name in target ? target[name] : 'no prop!'
    },
    set: function(target, prop, value, receiver) {
        target[prop] = value;
        console.log('property set: ' + prop + ' = ' + value);
        return true;
    }
};

var user = new Proxy({}, handler)
user.name = 'an' // property set: name = an

console.log(user.name) // an
console.log(user.age) // no prop!

上面提到過 Proxy 總共提供了 13 種攔截行為，分別是：

• getPrototypeOf / setPrototypeOf
• isExtensible / preventExtensions
• ownKeys / getOwnPropertyDescriptor
• defineProperty / deleteProperty
• get / set / has
• apply / construct

感興趣的可以查看 MDN ，一一嘗試一下，這里不再贅述

另外考慮兩個(gè)問題：

• Proxy只會(huì)代理對(duì)象的第一層，那么又是怎樣處理這個(gè)問題的呢？
• 監(jiān)測(cè)數(shù)組的時(shí)候可能觸發(fā)多次get/set，那么如何防止觸發(fā)多次呢（因?yàn)楂@取push和修改length的時(shí)候也會(huì)觸發(fā)）

Vue3 Proxy

對(duì)于第一個(gè)問題，我們可以判斷當(dāng)前 Reflect.get 的返回值是否為 Object ，如果是則再通過 reactive 方法做代理， 這樣就實(shí)現(xiàn)了深度觀測(cè)。

對(duì)于第二個(gè)問題，我們可以判斷是否是 hasOwProperty

下面我們自己寫個(gè)案例，通過proxy 自定義獲取、增加、刪除等行為

const toProxy = new WeakMap(); // 存放被代理過的對(duì)象
const toRaw = new WeakMap(); // 存放已經(jīng)代理過的對(duì)象
function reactive(target) {
  // 創(chuàng)建響應(yīng)式對(duì)象
  return createReactiveObject(target);
}
function isObject(target) {
  return typeof target === "object" && target !== null;
}
function hasOwn(target,key){
  return target.hasOwnProperty(key);
}
function createReactiveObject(target) {
  if (!isObject(target)) {
    return target;
  }
  let observed = toProxy.get(target);
  if(observed){ // 判斷是否被代理過
    return observed;
  }
  if(toRaw.has(target)){ // 判斷是否要重復(fù)代理
    return target;
  }
  const handlers = {
    get(target, key, receiver) {
        let res = Reflect.get(target, key, receiver);
        track(target,'get',key); // 依賴收集==
        return isObject(res) 
        ?reactive(res):res;
    },
    set(target, key, value, receiver) {
        let oldValue = target[key];
        let hadKey = hasOwn(target,key);
        let result = Reflect.set(target, key, value, receiver);
        if(!hadKey){
          trigger(target,'add',key); // 觸發(fā)添加
        }else if(oldValue !== value){
          trigger(target,'set',key); // 觸發(fā)修改
        }
        return result;
    },
    deleteProperty(target, key) {
      console.log("刪除");
      const result = Reflect.deleteProperty(target, key);
      return result;
    }
  };
  
  // 開始代理
  observed = new Proxy(target, handlers);
  toProxy.set(target,observed);
  toRaw.set(observed,target); // 做映射表
  return observed;
}

總結(jié)

Proxy 相比于 defineProperty 的優(yōu)勢(shì)：

• 基于 Proxy 和 Reflect ，可以原生監(jiān)聽數(shù)組，可以監(jiān)聽對(duì)象屬性的添加和刪除
• 不需要深度遍歷監(jiān)聽：判斷當(dāng)前 Reflect.get 的返回值是否為 Object ，如果是則再通過 reactive 方法做代理， 這樣就實(shí)現(xiàn)了深度觀測(cè)
• 只在 getter 時(shí)才對(duì)對(duì)象的下一層進(jìn)行劫持(優(yōu)化了性能)

所以，建議使用 Proxy 監(jiān)測(cè)變量變化

參考

• MDN
• 帶你了解 vue-next（Vue 3.0）之 爐火純青