如何在Vue中監(jiān)聽(tīng)數(shù)組的變化

今天就跟大家聊聊有關(guān)如何在Vue中監(jiān)聽(tīng)數(shù)組的變化，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

遍歷數(shù)組，而后對(duì)數(shù)組中的每個(gè)對(duì)象調(diào)用 observe 方法

// 上一篇中出現(xiàn)的未曾重寫(xiě)的代碼，這一篇中不再重復(fù)
var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  // 如果是數(shù)組，則遍歷所有元素
  if(Array.isArray(value)) {
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};
Observer.prototype.observeArray = function observeArray(items) {
  // 遍歷數(shù)組所有元素，對(duì)單個(gè)元素進(jìn)行 getter、setter 綁定
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};

現(xiàn)實(shí)的要求

實(shí)際實(shí)現(xiàn)中當(dāng)然不會(huì)如上例那么簡(jiǎn)單，官方文檔中對(duì)監(jiān)聽(tīng)數(shù)組是這樣描述的：

Vue 包含一組觀察數(shù)組的突變方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你直接設(shè)置一個(gè)項(xiàng)的索引時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
所以，要對(duì)數(shù)組本身的一些方法進(jìn)行監(jiān)聽(tīng)。

經(jīng)常要用到的一個(gè)小函數(shù)

def，在整個(gè) Vue 源碼中反復(fù)出現(xiàn)，利用Object.defineProperty() 在 obj 上定義屬性 key（也又可能是修改已存在屬性 key）：

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    // 轉(zhuǎn)變?yōu)?nbsp;boole 值，如果不傳參，轉(zhuǎn)為 false
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

給對(duì)象添加一組方法

給對(duì)象添加一組方法，如果所在環(huán)境支持 proto，就簡(jiǎn)單了，直接把對(duì)象的 proto 指向這一組方法就好了；如果不支持，則遍歷這一組方法，依次添加到對(duì)象中，作為隱藏屬性（即 enumerable: false，不能被 in 關(guān)鍵字找到）:

var hasProto = '__proto__' in {};
var augment = hasProto ? protoAugment : copyAugment;

function protoAugment(target, src) {
  target.__proto__ = src;
}
function copyAugment(target, src, keys) {
  for(var i = 0; i < keys.length; i++) {
    var key = keys[i];
    def(target, key, src[key]);
  }
}

先來(lái)一發(fā)簡(jiǎn)單的

var arrayPush = {};

(function(method){
  var original = Array.prototype[method];
  arrayPush[method] = function() {
    // this 指向可通過(guò)下面的測(cè)試看出
    console.log(this);
    return original.apply(this, arguments)
  };
})('push');

var testPush = [];
testPush.__proto__ = arrayPush;
// 通過(guò)輸出，可以看出上面所述 this 指向的是 testPush
// []
testPush.push(1);
// [1]
testPush.push(2);

偽改寫(xiě)數(shù)組原型來(lái)監(jiān)聽(tīng)數(shù)組的變化

如官方文檔所言，所需監(jiān)視的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 種方法，這 7 種方法有可分為兩類：

1、push()、unshift()、splice() 這三種可能會(huì)給數(shù)組添加新元素的方法；

2、其余的不會(huì)新增元素的方法。

為了避免污染全局的 Array，新建一個(gè)以 Array.prototype 為原型的對(duì)象，而后在這個(gè)對(duì)象本身附加屬性，再把這個(gè)新建的對(duì)象作為原型或者作為屬性添加到 Observer 的 value 中，來(lái)達(dá)到監(jiān)視其變化的目的。

var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);

接著就是遍歷需要觸發(fā)更新的幾個(gè)方法，依次將其附加到 arrayMethods 上：

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) {
  // 獲取原始的數(shù)組操作方法
  var original = arrayProto[method];
  // 在 arrayMethods 上新建屬性 method，并為 method 指定值（函數(shù)）
  // 即改寫(xiě) arrayMethods 上的同名數(shù)組方法
  def(arrayMethods, method, function mutator() {
    var arguments$1 = arguments;

    var i = arguments.length;
    var args = new Array(i);
    // 將偽數(shù)組 arguments 轉(zhuǎn)變?yōu)閿?shù)組形式
    // 為何不用 [].slice.call(arguments)？
    while(i--) {
      args[i] = arguments$1[i];
    }
    var result = original.apply(this, args);
    // 因 arrayMethods 是為了作為 Observer 中的 value 的原型或者直接作為屬性，所以此處的 this 一般就是指向 Observer 中的 value
    // 當(dāng)然，還需要修改 Observer，使得其中的 value 有一個(gè)指向 Observer 自身的屬性，__ob__，以此將兩者關(guān)聯(lián)起來(lái)
    var ob = this.__ob__;
    // 存放新增的數(shù)組元素
    var inserted;
    // 對(duì)幾個(gè)可能有新增元素的方法單獨(dú)考慮
    switch(method) {
      case 'push':
        inserted = args;
        break;
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        // splice 方法第三個(gè)參數(shù)開(kāi)始才是新增的元素
        inserted =args.slice(2);
        break;
    }
    if(inserted) {
      // 對(duì)新增元素進(jìn)行 getter、setter 綁定
      ob.observerArray(inserted);
    }
    // 觸發(fā)方法
    ob.dep.notify();
    return result;
  });
};

var arrayKeys = Object.getOwnPropertyNames(arrayMethods);

更新 Observer

根據(jù)上例代碼中的注釋，改寫(xiě) Observer，使得兩者關(guān)聯(lián)起來(lái)，達(dá)到監(jiān)聽(tīng)數(shù)組變化的目的：

var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  // 如果是數(shù)組，則遍歷所有元素
  if(Array.isArray(value)) {
    var argument = hasProto ? protoAugment : copyAugment;
    argument(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};

看完上述內(nèi)容，你們對(duì)如何在Vue中監(jiān)聽(tīng)數(shù)組的變化有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。