摘要：回顧在前面的幾個中，我們實現對象的屬性的監聽，但是有關于數組的行為我們一直沒有處理。并且上述的幾個數組方法是數組對象提供的，我們要想辦法去觸發下的函數。在設置值的時候就能成功觸發依賴。

看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。

在前面的幾個 step 中，我們實現對象的屬性的監聽，但是有關于數組的行為我們一直沒有處理。
我們先分析下導致數組有哪些行為：

調用方法：arr.splice(1, 2, "something1", "someting2")

直接賦值：arr[1] = "something"

首先我們知道數組下的一些方法是會對原數組照成影響的，有以下幾個：

push

pop

shift

unshift

splice

sort

reverse

這幾個方法總的來說會照成幾個影響：

數組長度發生變化

數組內元素順序發生變化

不像對象，如果對象的 key 值的順序發生變化，是不會影響視圖的變化，但數組的順序如果發生變化，視圖是要變化的。

也就是說當著幾個方法觸發的時候，我們需要視圖的更新，也就是要觸發 Dep 中的 notify 函數。

但是縱觀我們現在實現的代碼（ step5 中的代碼），我們并沒有特地的為數組提供一個 Dep。

并且上述的幾個數組方法是數組對象提供的，我們要想辦法去觸發 Dep 下的 notify 函數。

我們先為數組提供一個 Dep ，完善后的 Observer ：

export class Observer {

    constructor(value) {
        this.value = value
        if (Array.isArray(value)) {
            // 為數組設置一個特殊的 Dep
            this.dep = new Dep()
            this.observeArray(value)
        } else {
            this.walk(value)
        }
        Object.defineProperty(value, "__ob__", {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
    }

    /**
     * 遍歷對象下屬性，使得屬性變成可監聽的結構
     */
    walk(obj) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i], obj[keys[i]])
        }
    }

    /**
     * 同上，遍歷數組
     */
    observeArray (items) {
        for (let i = 0, l = items.length; i < l; i++) {
            observe(items[i])
        }
    }

}

同樣的在 defineReactive 我們需要處理數組添加依賴的邏輯

export function defineReactive(object, key, value) {
    let dep = new Dep()
    let childOb = observe(value)
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function () {
            if (Dep.target) {
                dep.addSub(Dep.target)
                Dep.target.addDep(dep)
                // 處理數組的依賴
                if(Array.isArray(value)){
                    childOb.dep.addSub(Dep.target)
                    Dep.target.addDep(childOb.dep)
                }
            }
            return value
        },
        set: function (newValue) {
            if (newValue !== value) {
                value = newValue
                dep.notify()
            }
        }
    })
}

ok 我們現在完成了依賴的添加，剩下的我們要實現依賴的觸發。

處理方法：在數組對象調用特定方法時，首先找到的應該是我們自己寫的方法，而這個方法中調用了原始方法，并觸發依賴。

我們先來包裝一下方法，得到一些同名方法：

const arrayProto = Array.prototype
// 復制方法
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
    "push",
    "pop",
    "shift",
    "unshift",
    "splice",
    "sort",
    "reverse"
]

/**
 * 改變數組的默認處理，將新添加的對象添加監聽
 */
methodsToPatch.forEach(function (method) {
    // 原始的數組處理方法
    const original = arrayProto[method]
    let mutator = function (...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 方法
        ob.dep.notify()
        return result
    }
    Object.defineProperty(arrayMethods, method, {
        value: mutator,
        enumerable: false,
        writable: true,
        configurable: true
    })
})

ok 我們現在得到了一些列同名的方法，我只要確保在調用時，先調用到我們的方法即可。

有兩種方式可以實現：

數組對象上直接有該方法，這樣就不會去找對象上的原型鏈

覆蓋對象的 __proto__ ，這樣尋找原型鏈時，就會先找到我們的方法

具體到代碼中的實現：

export class Observer {

    constructor(value) {
        this.value = value
        if (Array.isArray(value)) {
            this.dep = new Dep()
            const augment = ("__proto__" in {})
                ? protoAugment
                : copyAugment
            // 覆蓋數組中一些改變了原數組的方法，使得方法得以監聽
            augment(value, arrayMethods, arrayKeys)
            this.observeArray(value)
        } else {
            this.walk(value)
        }
        ...
    }
    ...
}

/**
 * 如果能使用 __proto__ 則將數組的處理方法進行替換
 */
function protoAugment (target, src, keys) {
    target.__proto__ = src
}

/**
 * 如果不能使用 __proto__ 則直接將該方法定義在當前對象下
 */
function copyAugment (target, src, keys) {
    for (let i = 0, l = keys.length; i < l; i++) {
        const key = keys[i]
        Object.defineProperty(target, key, {
            value: src[key],
            enumerable: false,
            writable: true,
            configurable: true
        })
    }
}

測試一下：

let object = {
    arrayTest: [1, 2, 3, 4, 5]
}

observe(object)

let watcher = new Watcher(object, function () {
    return this.arrayTest.reduce((sum, num) => sum + num)
}, function (newValue, oldValue) {
    console.log(`監聽函數，數組內所有元素 = ${newValue}`)
})

object.arrayTest.push(10)
// 監聽函數，數組內所有元素 = 25

到現在為止，我們成功的在數組調用方法的時候，添加并觸發了依賴。

首先先說明，數組下的索引是和對象下的鍵有同樣的表現，也就是可以用 defineReactive 來處理索引值，但是數組是用來存放一系列的值，我們并不能一開始就確定數組的長度，并且極有可能剛開始數組長度為 0，之后數組中的索引對應的內容也會不斷的變化，所以為索引調用 defineReactive 是不切實際的。

但是類似于 arr[1] = "something" 這樣的賦值在數組中也是常見的操作，在 Vue 中實現了 $set 具體的細節這里不談，這里實現了另一種方法，我們僅僅需要在數組對象下添加一個方法即可：

arrayMethods.$apply = function () {
    this.__ob__.observeArray(this)
    this.__ob__.dep.notify()
}

測試一下：

object.arrayTest[1] = 10
object.arrayTest.$apply()
// 監聽函數，數組內所有元素 = 33

到目前為了，一個完整的數據監聽的模型也就完成了，我們可以使用 observe 方法來得到一個可監聽結構，然后用 Watcher 添加依賴。

在設置值的時候就能成功觸發依賴。

點擊查看相關代碼

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結