摘要：關(guān)于中的的實現(xiàn)，差不多也就這樣了，當(dāng)然這僅僅是基礎(chǔ)的實現(xiàn)，而且視圖層層渲染抽象成一個函數(shù)。不同于中的實現(xiàn)，這里少了很多各種標(biāo)記和應(yīng)用標(biāo)記的過程。

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

首先我們思考一下截止當(dāng)前，我們都做了什么

通過 defineReactive 這個函數(shù)，實現(xiàn)了對于數(shù)據(jù)取值和設(shè)置的監(jiān)聽

通過 Dep 類，實現(xiàn)了依賴的管理

通過 Watcher 類，抽象出了對象下某個屬性的依賴，以及屬性變換的 callBack

對比 Vue 的 MVVM（先把視圖層的渲染抽象成一個函數(shù)），我們僅僅是實現(xiàn)了一些基礎(chǔ)性的東西。還有很大的區(qū)別，比如

我們的 Watcher 僅僅是抽象了對象下的單一屬性，而一般視圖層的渲染是涉及多個屬性的，而這些屬性的變化是同一個渲染函數(shù)（也就是 Vue 中編譯模板字符串最終生成的函數(shù)）。

通過第一點，我們可以得知，對象下的某幾個屬性是擁有同一個 Watcher 的，換句話說就是，多個 Dep 依賴與同一個 Watcher，那么 Watcher 中該如何保存這些 Dep ，因為按照我們的實現(xiàn)，都一個 Watcher 中僅僅保持一個 Dep

先讓我們想想，我們是如何把依賴注入到 Dep 中的

通過取值觸發(fā) defineProperty 中的 get，然后添加依賴

換句話說就是，我只要取過對應(yīng)屬性的值，那么就可以添加依賴。
看到之前 Watcher 的實現(xiàn)：

this.get = function () {
    Dep.target = this
    let value = this.getter.call(object)
    Dep.target = null
    return value
}

這段代碼就實現(xiàn)了添加相應(yīng)屬性的依賴，歸根到底是這段起了作用

let value = this.obj[this.getter]

這里觸發(fā)了對應(yīng)屬性的 get ，那好針對第一個問題，我們只要在這里觸發(fā)多個屬性的 get 即可，至于要觸發(fā)那些屬性，我們交由調(diào)用者來控制，順理成章的這里應(yīng)該是一個函數(shù)。考慮之后便有了以下代碼

let Watcher = function (object, getter, callback) {
    this.obj = object
    // 這里的 getter 應(yīng)該是一個函數(shù)
    this.getter = getter
    this.cb = callback
    this.dep = null
    this.value = undefined

    this.get = function () {
        Dep.target = this
        // 將取值方式改成函數(shù)調(diào)用
        let value = this.getter.call(object)
        Dep.target = null
        return value
    }

    this.update = function () {
        const value = this.getter.call(object)
        const oldValue = this.value
        this.value = value
        this.cb.call(this.obj, value, oldValue)
    }

    this.addDep = function (dep) {
        this.dep = dep
    }

    this.value = this.get()
}

問題二其實很簡單，既然要保存多個 dep 我們把保存的值聲明成一個數(shù)組即可

let Watcher = function (object, getter, callback) {
    this.obj = object
    this.getter = getter
    this.cb = callback
    // 聲明成數(shù)組
    this.deps = []
    this.value = undefined

    this.get = function () {
        Dep.target = this
        let value = this.getter.call(object)
        Dep.target = null
        return value
    }

    this.update = function () {
        const value = this.getter.call(object)
        const oldValue = this.value
        this.value = value
        this.cb.call(this.obj, value, oldValue)
    }

    this.addDep = function (dep) {
        // 將 dep 推入數(shù)組中
        this.deps.push(dep)
    }

    this.value = this.get()
}

為了方便取消這個 Watcher ，我們在添加一個函數(shù)，用于取消所有 Dep 對 Watcher 的依賴，所以最終 Watcher 的代碼如下：

let Watcher = function (object, getter, callback) {
    this.obj = object
    this.getter = getter
    this.cb = callback
    this.deps = []
    this.value = undefined

    this.get = function () {
        Dep.target = this
        let value = this.getter.call(object)
        Dep.target = null
        return value
    }

    this.update = function () {
        const value = this.getter.call(object)
        const oldValue = this.value
        this.value = value
        this.cb.call(this.obj, value, oldValue)
    }

    this.addDep = function (dep) {
        this.deps.push(dep)
    }

    // 新添加的取消依賴的方法
    this.teardown = function () {
        let i = this.deps.length
        while (i--) {
            this.deps[i].removeSub(this)
        }
        this.deps = []
    }

    this.value = this.get()
}

我們僅僅優(yōu)化了 Watcher 的實現(xiàn)，其他的代碼并沒有發(fā)生變化

let object = {}
defineReactive(object, "num1", 2)
defineReactive(object, "num2", 4)

let watcher = new Watcher(object, function () {
    return this.num1 + this.num2
}, function (newValue, oldValue) {
    console.log(`這是一個監(jiān)聽函數(shù)，${object.num1} + ${object.num2} = ${newValue}`)
})

object.num1 = 3
// 這是一個監(jiān)聽函數(shù)，3 + 4 = 7
object.num2 = 10
// 這是一個監(jiān)聽函數(shù)，3 + 10 = 13

let watcher2 = new Watcher(object, function () {
    return this.num1 * this.num2
}, function (newValue, oldValue) {
    console.log(`這是一個監(jiān)聽函數(shù)，${object.num1} * ${object.num2} = ${newValue}`)
})

object.num1 = 4
// 這是一個監(jiān)聽函數(shù)，4 + 10 = 14
// 這是一個監(jiān)聽函數(shù)，4 * 10 = 40
object.num2 = 11
// 這是一個監(jiān)聽函數(shù)，4 + 11 = 15
// 這是一個監(jiān)聽函數(shù)，4 * 11 = 44

// 測試取消
watcher2.teardown()

object.num1 = 5
// 這是一個監(jiān)聽函數(shù)，5 + 11 = 16
object.num2 = 12
// 這是一個監(jiān)聽函數(shù)，5 + 12 = 17

這就實現(xiàn)了對于多個屬性設(shè)置同一個監(jiān)聽，當(dāng)監(jiān)聽函數(shù)中的依賴屬性發(fā)生變化時，自動執(zhí)行了相應(yīng)的函數(shù)。

關(guān)于 Vue 中的 MVVM 的實現(xiàn) ，差不多也就這樣了，當(dāng)然這僅僅是基礎(chǔ)的實現(xiàn)，而且視圖層層渲染抽象成一個函數(shù)。

不同于 Vue 中的實現(xiàn)，這里少了很多各種標(biāo)記和應(yīng)用標(biāo)記的過程。

這些會增加理解難度，之后有用到再說，實現(xiàn)完整的 MVVM 還需要對數(shù)組進行特殊的處理，因為數(shù)組是不能用 Object.defineProperty 來處理索引值的，這個也之后再說。

點擊查看相關(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é)