Vue源碼解析之數組變異

力有不逮的對象

衆所周知，在 Vue 中，直接修改對象屬性的值沒法觸發響應式。當你直接修改了對象屬性的值，你會發現，只有數據改了，可是頁面內容並無改變。

這是什麼緣由？

緣由在於： Vue 的響應式系統是基於Object.defineProperty這個方法的，該方法能夠監聽對象中某個元素的獲取或修改，通過了該方法處理的數據，咱們稱其爲響應式數據。可是，該方法有一個很大的缺點，新增屬性或者刪除屬性不會觸發監聽，舉個栗子：

var vm = new Vue({
    data () {
        return {
            obj: {
                a: 1
            }
        }
    }
})
// `vm.obj.a` 如今是響應式的

vm.obj.b = 2
// `vm.obj.b` 不是響應式的
複製代碼

緣由在於，在 Vue 初始化的時候， Vue 內部會對 data 方法的返回值進行深度響應式處理，使其變爲響應式數據，因此， vm.obj.a 是響應式的。可是，以後設置的 vm.obj.b 並無通過 Vue 初始化時響應式的洗禮，因此，理所應當的不是響應式。

那麼，vm.obj.b能夠變成響應式嗎？固然能夠，經過 vm.$set 方法就能夠完美地實現要求，在此再也不贅述相關原理了，以後應該會寫一篇文章講述 vm.$set 背後的原理。

更悽慘的數組

上面說了這麼多，尚未提到本篇文章的主角——數組，如今該主角出場了。

比起對象，數組的境遇更加悽慘一些，看看官方文檔：

因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

有可能官方文檔不是很清晰，那咱們繼續舉個栗子：

var vm = new Vue({
    data () {
        return {
            items: ['a', 'b', 'c']
        }
    }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的
複製代碼

也就是說，數組連自身元素的修改也沒法監聽，緣由在於， Vue 對 data 方法返回的對象中的元素進行響應式處理時，若是元素是數組時，僅僅對數組自己進行響應式化，而不對數組內部元素進行響應式化。

這也就致使如官方文檔所寫的後果，沒法直接修改數組內部元素來觸發響應式。

那麼，有沒有破解方法呢？

固然有，官方規定了 7 個數組方法，經過這 7 個數組方法，能夠很開心地觸發數組的響應式，這 7 個數組方法分別是：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

能夠發現，這 7 個數組方法貌似就是原生的那些數組方法，爲何這 7 個數組方法能夠觸發應式，觸發視圖更新呢？

你是否是內心想着：數組方法了不得呀，數組方法就能夠隨心所欲啊？

騷瑞啊，這 7 個數組方法是真的能夠隨心所欲的。

由於，它們是變異後的數組方法。

數組變異思路

什麼是變異數組方法？

變異數組方法即保持數組方法原有功能不變的前提下對其進行功能拓展，在 Vue 中這個所謂的功能拓展就是添加響應式功能。

將普通的數組變爲變異數組的方法分爲兩步：

1. 功能拓展
2. 數組劫持

功能拓展

先來個思考題：

有這樣一個需求，要求在不改變原有函數功能以及調用方式的狀況下，使得每次調用該函數都能在控制檯中打印出'HelloWorld'

其實思路很簡單，分爲三步：

1. 使用新的變量緩存原函數
2. 從新定義原函數
3. 在新定義的函數中調用原函數

看看具體的代碼實現：

function A () {
    console.log('調用了函數A')
}

const nativeA = A
A = function () {
    console.log('HelloWorld')
    nativeA()
}
複製代碼

能夠看到，經過這種方式，咱們就保證了在不改變 A 函數行爲的前提下對其進行了功能拓展。

接下來，咱們使用這種方法對數組本來方法進行功能拓展：

// 變異方法名稱
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

const arrayProto = Array.prototype
// 繼承原有數組的方法
const arrayMethods = Object.create(arrayProto)

mutationMethods.forEach(method => {
    // 緩存原生數組方法
    const original = arrayProto[method]
    arrayMethods[method] = function (...args) {
        const result = original.apply(this, args)
        
        console.log('執行響應式功能')
        
        return result
    }
})
複製代碼

從代碼中能夠看出來，咱們調用 arrayMethods 這個對象中的方法有兩種狀況：

1. 調用功能拓展方法：直接調用 arrayMethods 中的方法
2. 調用原生方法：這種狀況下，經過原型鏈查找定義在數組原型中的原生方法

經過上述方法，咱們實現了對數組原生方法進行功能的拓展，可是，有一個巨大的問題擺在面前：咱們該如何讓數組實例調用功能拓展後數組方法呢？

解決這一問題的方法就是：數組劫持。

數組劫持

數組劫持，顧名思義就是將本來數組實例要繼承的方法替換成咱們功能拓展後的方法。

想想，咱們在前面實現了一個功能拓展後的數組 arrayMethods ，這個自定義的數組繼承自數組對象，咱們只須要將其和普通數組實例鏈接起來，讓普通數組繼承於它便可。

而想實現上述操做，就是經過原型鏈。

實現方法以下代碼所示：

let arr = []
// 經過隱式原型繼承arrayMethods
arr.__proto__ = arrayMethods

// 執行變異後方法
arr.push(1)
複製代碼

經過功能拓展和數組劫持，咱們終於實現了變異數組，接下來讓咱們看看 Vue 源碼是如何實現變異數組的。

源碼解析

咱們來到 src/core/observer/index.js 中在 Observer 類中的 constructor 函數：

constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    // 檢測是不是數組
    if (Array.isArray(value)) {
        // 能力檢測
        const augment = hasProto
        ? protoAugment
        : copyAugment
        // 經過能力檢測的結果選擇不一樣方式進行數組劫持
        augment(value, arrayMethods, arrayKeys)
        // 對數組的響應式處理
        this.observeArray(value)
    } else {
        this.walk(value)
    }
}
複製代碼

Observer 這個類是 Vue 響應式系統的核心組成部分，在初始化階段最主要的功能是將目標對象進行響應式化。在這裏，咱們主要關注其對數組的處理。

其對數組的處理主要是如下代碼

// 能力檢測
const augment = hasProto
? protoAugment
: copyAugment
// 經過能力檢測的結果選擇不一樣方式進行數組劫持
augment(value, arrayMethods, arrayKeys)
// 對數組的響應式處理，很本文關係不大，略過
this.observeArray(value)
複製代碼

首先定義了 augment 常量，這個常量的值由 hasProto 決定。

咱們來看看 hasProto：

export const hasProto = '__proto__' in {}
複製代碼

能夠發現， hasProto 其實就是一個布爾值常量，用來表示瀏覽器是否支持直接使用 __proto__ （隱式原型） 。

因此，第一段代碼很好理解：根據根據能力檢測結果選擇不一樣的數組劫持方法，若是瀏覽器支持隱式原型，則調用 protoAugment 函數做爲數組劫持的方法，反之則使用 copyAugment 。

不一樣的數組劫持方法

如今咱們來看看 protoAugment 以及 copyAugment 。

function protoAugment (target, src: Object, keys: any) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}
複製代碼

能夠看到， protoAugment 函數極其簡潔，和在數組變異思路中所說的方法一致：將數組實例直接經過隱式原型與變異數組鏈接起來，經過這種方式繼承變異數組中的方法。

接下來咱們再看看 copyAugment ：

function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    // Object.defineProperty的封裝
    def(target, key, src[key])
  }
}
複製代碼

因爲在這種狀況下，瀏覽器不支持直接使用隱式原型，因此數組劫持方法要麻煩不少。咱們知道該函數接收的第一個參數是數組實例，第二個參數是變異數組，那麼第三個參數是什麼？

// 獲取變異數組中全部自身屬性的屬性名
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
複製代碼

arrayKeys 在該文件的開頭就定義了，即變異數組中的全部自身屬性的屬性名，是一個數組。

回頭再看 copyAugment 函數就很清晰了，將全部變異數組中的方法，直接定義在數組實例自己，至關於變相的實現了數組的劫持。

實現了數組劫持後，咱們再來看看 Vue 中是怎樣實現數組的功能拓展的。

功能拓展

數組功能拓展的代碼位於 src/core/observer/array.js ，代碼以下：

import { def } from '../util/index'

// 緩存數組原型
const arrayProto = Array.prototype
// 實現 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 須要進行功能拓展的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/** * Intercept mutating methods and emit events */
methodsToPatch.forEach(function (method) {
  // cache original method
  // 緩存原生數組方法
  const original = arrayProto[method]
  // 在變異數組中定義功能拓展方法
  def(arrayMethods, method, function mutator (...args) {
    // 執行並緩存原生數組方法的執行結果
    const result = original.apply(this, args)
    // 響應式處理
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    // 返回原生數組方法的執行結果
    return result
  })
})
複製代碼

能夠發現，源碼在實現的方式上，和我在數組變異思路中採用的方法一致，只不過在其中添加了響應式的處理。

總結

Vue 的變異數組從本質上是來講是一種裝飾器模式，經過學習它的原理，咱們在實際工做中能夠輕鬆處理這類保持原有功能不變的前提下對其進行功能拓展的需求。