摘要：關于中的的實現，差不多也就這樣了，當然這僅僅是基礎的實現，而且視圖層層渲染抽象成一個函數。不同于中的實現，這里少了很多各種標記和應用標記的過程。

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

首先我們思考一下截止當前，我們都做了什么

通過 defineReactive 這個函數，實現了對于數據取值和設置的監聽

通過 Dep 類，實現了依賴的管理

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

對比 Vue 的 MVVM（先把視圖層的渲染抽象成一個函數），我們僅僅是實現了一些基礎性的東西。還有很大的區別，比如

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

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

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

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

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

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

這段代碼就實現了添加相應屬性的依賴，歸根到底是這段起了作用

let value = this.obj[this.getter]

這里觸發了對應屬性的 get ，那好針對第一個問題，我們只要在這里觸發多個屬性的 get 即可，至于要觸發那些屬性，我們交由調用者來控制，順理成章的這里應該是一個函數?？紤]之后便有了以下代碼

let Watcher = function (object, getter, callback) {
    this.obj = object
    // 這里的 getter 應該是一個函數
    this.getter = getter
    this.cb = callback
    this.dep = null
    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.dep = dep
    }

    this.value = this.get()
}

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

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) {
        // 將 dep 推入數組中
        this.deps.push(dep)
    }

    this.value = this.get()
}

為了方便取消這個 Watcher ，我們在添加一個函數，用于取消所有 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()
}

我們僅僅優化了 Watcher 的實現，其他的代碼并沒有發生變化

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(`這是一個監聽函數，${object.num1} + ${object.num2} = ${newValue}`)
})

object.num1 = 3
// 這是一個監聽函數，3 + 4 = 7
object.num2 = 10
// 這是一個監聽函數，3 + 10 = 13

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

object.num1 = 4
// 這是一個監聽函數，4 + 10 = 14
// 這是一個監聽函數，4 * 10 = 40
object.num2 = 11
// 這是一個監聽函數，4 + 11 = 15
// 這是一個監聽函數，4 * 11 = 44

// 測試取消
watcher2.teardown()

object.num1 = 5
// 這是一個監聽函數，5 + 11 = 16
object.num2 = 12
// 這是一個監聽函數，5 + 12 = 17

這就實現了對于多個屬性設置同一個監聽，當監聽函數中的依賴屬性發生變化時，自動執行了相應的函數。

關于 Vue 中的 MVVM 的實現 ，差不多也就這樣了，當然這僅僅是基礎的實現，而且視圖層層渲染抽象成一個函數。

不同于 Vue 中的實現，這里少了很多各種標記和應用標記的過程。

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

點擊查看相關代碼

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 & 總結