VUE - MVVM - part9 - Vue

yzd 發布于2019-08-22 16:45 / 2681人閱讀

摘要：調用父類的方法類在我們上一步已經實現。我們先實現的綁定，因為是要被監聽，所以要進行進一步的處理。調用父類的方法方法綁定完事，其實就這么簡單。

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

前言

激動人心的時候即將來臨，之前我們做的 8 步，其實都在為這一步打基礎，這一步，我們來簡單實現一個 Vue 對象，還沒有看過之前代碼的同學，請確認看過之前的文章。

主要實現內容

我們從測試代碼入手，來看我們這個 Vue 實現了什么，然后在根據要實現的內容來編寫這個 Vue 對象：

let test = new Vue({
    data() {
        return {
            baseTest: "baseTest",
            objTest: {
                stringA: "stringA",
                stringB: "stringB"
            }
        }
    },
    methods: {
        methodTest() {
            console.log("methodTest")
            this.$emit("eventTest", "事件測試")
        }
    },
    watch: {
        "baseTest"(newValue, oldValue) {
            console.log(`baseTest change ${oldValue} => ${newValue}`)
        },
        "objTest.stringA"(newValue, oldValue) {
            console.log(`objTest.stringA change ${oldValue} => ${newValue}`)
        }
    }
})

test.$on("eventTest", function (event) {
    console.log(event)
})

test.methodTest()

test.baseTest

主要實現的內容有：

有屬性的監聽 Watcher

實例下 data/methods 數據的代理（直接使用 this.xxx 就能訪問到具體的屬性/方法）

有事件 $on/$emit

實現

我們根據實現的難易程度來實現上面 3 點。

實現第 3 點，只要繼承 Event 這個類即可：

注：在 Vue 源碼中并不是通過這個方式實現的事件，有興趣的可以自己去了解下，但是在我看來這樣是最容易理解的方式。

class Vue extends Event {
    constructor() {
        // 調用父類的 constructor 方法
        super()
        ...
    }
    ...
}

Event 類在我們上一步已經實現。

接著我們來處理第二點。為了方便代碼的管理，我們在類下定義一個 _init 方法，來實現 Vue 的初始化。

我們先實現 methods 的綁定，因為 data 是要被監聽，所以要進行進一步的處理。

class Vue extends Event {
    constructor(options) {
        // 調用父類的 constructor 方法
        super()
        this._init(options)
    }
    
    _init(options) {
        let vm = this
        if (options.methods) {
            for (let key in options.methods) {
                vm[key] = options.methods[key].bind(vm)
            }
        }
    }
}

ok methods 方法綁定完事，其實就這么簡單。

接下來我們來處理 data ，由于 data 是需要被變換成可監聽結構，所以我們先處理一下，然后代理到 this 對象下，如果直接賦值而不代理的話 data 的可監聽結構就會被破壞，我們需要一個完整的對象，這個可監聽結構才能完整。

這里先實現一下代理的方法：

export function proxy(target, sourceKey, key) {
    const sharedPropertyDefinition = {
        enumerable: true,
        configurable: true,
        get() {
        },
        set() {
        }
    }
    sharedPropertyDefinition.get = function proxyGetter() {
        return this[sourceKey][key]
    }
    sharedPropertyDefinition.set = function proxySetter(val) {
        this[sourceKey][key] = val
    }
    Object.defineProperty(target, key, sharedPropertyDefinition)
}

原理還是通過 Object.defineProperty 方法來實現，當訪問（get） target 下的某個屬性的時候，就會去找 target[sourceKey] 下的同名屬性，設置（set） target 下的某個屬性，就會讓設置 target[sourceKey] 下的同名屬性。這就實現了代理。

ok 代理實現，我們繼續為 _init 添加方法，具體的步驟看代碼中的注釋

class Vue extends Event {
    constructor(options) {
        // 調用父類的 constructor 方法
        super()
        this._init(options)
    }
    
    _init(options) {
        let vm = this
        if (options.methods) {
            for (let key in options.methods) {
                // 綁定 this 指向
                vm[key] = options.methods[key].bind(vm)
            }
        }
        // 由于 data 是個函數，所以需要調用，并綁定上下文環境
        vm._data = options.data.call(vm)
        // 將 vm._data 變成可監聽結構，實現 watcher 的添加
        observe(vm._data)
        // 代理屬性，這保證了監聽結構是一個完成的對象
        for (let key in vm._data) {
            proxy(vm, "_data", key)
        }
    }
}

最后一步，添加 watcher ，仔細分析我們在實例化時寫的 watcher：

watch: {
    "baseTest"(newValue, oldValue) {
        console.log(`baseTest change ${oldValue} => ${newValue}`)
    },
    "objTest.stringA"(newValue, oldValue) {
        console.log(`objTest.stringA change ${oldValue} => ${newValue}`)
    }
}

key 為需要監聽的屬性的路徑，value 為觸發監聽時的回調。

ok 我們來實現它

class Vue extends Event {
    constructor(options) {
        super()
        this._init(options)
    }

    _init(options) {
        ...

        // 循環取出 key/value
        for (let key in options.watch) {
            // 用我們之前實現的 Watcher 來注冊監聽
            // 參一：watcher 的運行環境
            // 參二：獲取注冊該 watcher 屬性
            // 參三：觸發監聽時的回調 
            new Watcher(vm, () => {
                // 需要監聽的值，eg: "objTest.stringA" ==> vm.objTest.stringA
                return key.split(".").reduce((obj, name) => obj[name], vm)
            }, options.watch[key])
        }

    }
}

ok watcher 也已經實現，以下就是完整的代碼：

export function proxy(target, sourceKey, key) {
    const sharedPropertyDefinition = {
        enumerable: true,
        configurable: true,
        get() {
        },
        set() {
        }
    }
    sharedPropertyDefinition.get = function proxyGetter() {
        return this[sourceKey][key]
    }
    sharedPropertyDefinition.set = function proxySetter(val) {
        this[sourceKey][key] = val
    }
    Object.defineProperty(target, key, sharedPropertyDefinition)
}

let uid = 0

export class Vue extends Event {
    constructor(options) {
        super()
        this._init(options)
    }

    _init(options) {
        let vm = this
        vm.uid = uid++

        if (options.methods) {
            for (let key in options.methods) {
                vm[key] = options.methods[key].bind(vm)
            }
        }

        vm._data = options.data.call(vm)
        observe(vm._data)
        for (let key in vm._data) {
            proxy(vm, "_data", key)
        }

        for (let key in options.watch) {
            new Watcher(vm, () => {
                return key.split(".").reduce((obj, name) => obj[name], vm)
            }, options.watch[key])
        }

    }
}

接下來，我們來測試一下

let test = new Vue({
    data() {
        return {
            baseTest: "baseTest",
            objTest: {
                stringA: "stringA",
                stringB: "stringB"
            }
        }
    },
    methods: {
        methodTest() {
            console.log("methodTest")
            this.$emit("eventTest", "事件測試")
        }
    },
    watch: {
        "baseTest"(newValue, oldValue) {
            console.log(`baseTest change ${oldValue} => ${newValue}`)
        },
        "objTest.stringA"(newValue, oldValue) {
            console.log(`objTest.stringA change ${oldValue} => ${newValue}`)
        }
    }
})

test.$on("eventTest", function (event) {
    console.log(event)
})

test.methodTest()
// methodTest
// 事件測試

test.baseTest = "baseTestChange"
// baseTest change baseTest => baseTestChange

test.objTest.stringA = "stringAChange"
// objTest.stringA change stringA => stringAChange

剛開始使用 Vue 的時候，感覺代碼里面都是些黑魔法，在看了源碼之后驚覺：其實 Vue 的整個實現并沒有什么黑魔法，有的是精心的結構和處理，耐心點看下去，我相信我的收獲會很大。

點擊查看相關代碼

系列文章地址

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

云服務器 GPU云服務器 Vue_Vue Vue vue3 學習筆記 (五)——vue3 _vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94631.html

VUE - MVVM - part1 - defineProperty

摘要：在中關于如何實現在網上可以搜出不少，在看了部分源碼后，梳理一下內容。換個說法，當我們取值的時候，函數自動幫我們添加了針對當前值的依賴，當這個值發生變化的時候，處理了這些依賴，比如說節點的變化。在 VUE 中關于如何實現在網上可以搜出不少，在看了部分源碼后，梳理一下內容。首先，我們需要了解一下 js 中的一個 API :Object.defineProperty(obj, prop,...

liukai90 2019-08-22 16:12 評論0 收藏0
VUE - MVVM - part7 - Event

摘要：事件是什么在標準瀏覽器中，我們經常使用來為一個添加一個事件等。仔細看這些情況，歸結到代碼中，無非就是一個行為或情況的名稱，和一些列的動作，而在中動作就是，一系列的動作就是一個函數的集合。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。事件是什么？在標準瀏覽器中，我們經常使用：addEventListener 來為一個 DOM 添加一個事件（click、mouse...

xialong 2019-08-22 16:39 評論0 收藏0
VUE - MVVM - part2 - Dep

摘要：看這篇之前，如果沒看過先移步看實現中。同樣的，在取值時收集依賴，在設置值當值發生變化時觸發依賴。中實現了一個的類來處理以上兩個問題，之后再說。以下語法下的，源碼中差不多就這樣點擊查看相關代碼系列文章地址優化優化總結看這篇之前，如果沒看過 step1 先移步看實現 VUE 中 MVVM - step1 - defineProperty。在上一篇我們大概實現了，Vue 中的依賴收集和...

hover_lew 2019-08-22 16:12 評論0 收藏0
VUE - MVVM - part11 - Extend

摘要：所以方法，是對默認進行擴展，從而實現擴展。這里我用了這個庫提供的合并方法，用來合并兩個對象，并不會修改原對象的內容。測試符合我們的預期，方法也就實現了，下一步，實現父子組件。系列文章地址優化優化總結看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。組件的擴展在 Vue 中有 extend 方法可以擴展 Vue 的實例，在上一步中，有一些實現是必須要通過子父組件才...

cartoon 2019-08-22 17:02 評論0 收藏0
VUE - MVVM - part13 - inject & 總結

摘要：通過裝作這些變化，我們實現了從而到達了數據變化觸發函數的過程。于此同時，我們還實現了來擴展這個可響應的結構，讓這個對象擁有了觸發和響應事件的能力。最后，根據我們的實現，這是最終的產出，一個框架，了解一下系列文章地址優化優化總結看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。 provide / inject 在上一步我們實現了，父子組件，和 props 一樣 pr...

niuxiaowei111 2019-08-22 17:12 評論0 收藏0