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

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

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

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

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

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

push

pop

shift

unshift

splice

sort

reverse

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

數(shù)組長度發(fā)生變化

數(shù)組內(nèi)元素順序發(fā)生變化

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

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

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

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

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

export class Observer {

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

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

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

}

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

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)
                // 處理數(shù)組的依賴
                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 我們現(xiàn)在完成了依賴的添加，剩下的我們要實現(xiàn)依賴的觸發(fā)。

處理方法：在數(shù)組對象調(diào)用特定方法時，首先找到的應(yīng)該是我們自己寫的方法，而這個方法中調(diào)用了原始方法，并觸發(fā)依賴。

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

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

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

/**
 * 改變數(shù)組的默認處理，將新添加的對象添加監(jiān)聽
 */
methodsToPatch.forEach(function (method) {
    // 原始的數(shù)組處理方法
    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
        }
        // 新添加的對象需要添加監(jiān)聽
        if (inserted) ob.observeArray(inserted)
        // 觸發(fā) notify 方法
        ob.dep.notify()
        return result
    }
    Object.defineProperty(arrayMethods, method, {
        value: mutator,
        enumerable: false,
        writable: true,
        configurable: true
    })
})

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

有兩種方式可以實現(xiàn)：

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

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

具體到代碼中的實現(xiàn)：

export class Observer {

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

/**
 * 如果能使用 __proto__ 則將數(shù)組的處理方法進行替換
 */
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(`監(jiān)聽函數(shù)，數(shù)組內(nèi)所有元素 = ${newValue}`)
})

object.arrayTest.push(10)
// 監(jiān)聽函數(shù)，數(shù)組內(nèi)所有元素 = 25

到現(xiàn)在為止，我們成功的在數(shù)組調(diào)用方法的時候，添加并觸發(fā)了依賴。

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

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

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

測試一下：

object.arrayTest[1] = 10
object.arrayTest.$apply()
// 監(jiān)聽函數(shù)，數(shù)組內(nèi)所有元素 = 33

到目前為了，一個完整的數(shù)據(jù)監(jiān)聽的模型也就完成了，我們可以使用 observe 方法來得到一個可監(jiān)聽結(jié)構(gòu)，然后用 Watcher 添加依賴。

在設(shè)置值的時候就能成功觸發(fā)依賴。

點擊查看相關(guān)代碼

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優(yōu)化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優(yōu)化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結(jié)