VUE - MVVM - part1 - defineProperty

liukai90 發布于2019-08-22 16:12 / 2317人閱讀

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

在 VUE 中關于如何實現在網上可以搜出不少，在看了部分源碼后，梳理一下內容。

首先，我們需要了解一下 js 中的一個 API :
Object.defineProperty(obj, prop, descriptor)

一般情況下我們為一個對象添加一個屬性一般都會這么寫

let object = {}
object.test = "test"

Object.defineProperty 也能做到同樣的效果

let object = {}, test = "test"
Object.defineProperty(object, "test", {
    configurable: true,             // 描述該屬性的描述符能否被改變，默認值為 false
    enumerable: true,               // 能否被遍歷，比如 for in，默認值為 false
    get: function(){                // 取值的時候調用，object.test，默認值為 false
        console.log("enter get")
        return test
    },
    set: function(newValue){        // 設置值的時候使用
        console.log("enter set")
        test = newValue
    }
})

這樣寫雖然代碼量多了不少，但是卻擁有了控制屬性取值和設置值的權利，讓我們來測試一下。

object.test
// enter get
// test
object.test = "test2"
// enter set
// test2

接著我們把 defindProperty 這個函數封裝同時改造一下，方便我們調用

let callback = {
    target: null
}
let defineReactive = function(object, key, value){
    let array = []
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function(){
            if(callback.target){
                array.push(callback.target)
            }
            return value
        },
        set: function(newValue){
            if(newValue != value){
                array.forEach((fun)=>fun(newValue, value))
            }
            value = newValue
        }
    })
}

可以從代碼中看出來，我在函數內部聲明了一個數組用于存放 callback 中的 target，當對 object 進行 get 操作(取值操作)的時候，就會往 array 中存放函數，進行 set 操作(設置值)的時候執行 array 中的函數。看看效果如何

let object = {}
defineReactive(object, "test", "test")
callback.target = function(newValue, oldValue){
    console.log("我被添加進去了，新的值是：" + newValue)
}
object.test
// test

callback.target = null
object.test = "test2"
// 我被添加進去了，新的值是：test2

callback.target = function(newValue, oldValue){
    console.log("添加第二個函數，新的值是：" + newValue)
}
object.test
// test

callback.target = null
object.test = "test3"
// 我被添加進去了，新的值是：test3
// 添加第二個函數，新的值是：test3

這樣我們就達成了在 object.test 的值發生改變時，運行一個函數隊列（雖然這個隊列挺簡陋的）的目的。

換個說法，當我們取值的時候，函數自動幫我們添加了針對當前值的依賴，當這個值發生變化的時候，處理了這些依賴，比如說 DOM 節點的變化。

這個也是 VUE 中實現 MVVM 的最核心的代碼，當然在 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云服務器 Part1 defineProperties defineProperty MVVM

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

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

VUE - MVVM - part2 - Dep

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

hover_lew 2019-08-22 16:12 評論0 收藏0
VUE - MVVM - part6 - Array

摘要：回顧在前面的幾個中，我們實現對象的屬性的監聽，但是有關于數組的行為我們一直沒有處理。并且上述的幾個數組方法是數組對象提供的，我們要想辦法去觸發下的函數。在設置值的時候就能成功觸發依賴。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧在前面的幾個 step 中，我們實現對象的屬性的監聽，但是有關于數組的行為我們一直沒有處理。我們先分析下導致數組有哪些行為： ...

0x584a 2019-08-22 16:33 評論0 收藏0
VUE - MVVM - part9 - Vue

摘要：調用父類的方法類在我們上一步已經實現。我們先實現的綁定，因為是要被監聽，所以要進行進一步的處理。調用父類的方法方法綁定完事，其實就這么簡單。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。前言激動人心的時候即將來臨，之前我們做的 8 步，其實都在為這一步打基礎，這一步，我們來簡單實現一個 Vue 對象，還沒有看過之前代碼的同學，請確認看過之前的文章。主要實現內...

yzd 2019-08-22 16:45 評論0 收藏0
VUE - MVVM - part5 - Observe

摘要：具體代碼執行方式進入到的目錄下，命令行運行即可。確保為一個對象如果對象下有則不需要再次生成函數返回該對象的實例，這里判斷了如果該對象下已經有實例，則直接返回，不再去生產實例。這就確保了一個對象下的實例僅被實例化一次。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧在 step4 中，我們大致實現了一個 MVVM 的框架，由3個部分組成： defineRe...

xi4oh4o 2019-08-22 16:23 評論0 收藏0
VUE - MVVM - part4 - 優化Watcher

摘要：關于中的的實現，差不多也就這樣了，當然這僅僅是基礎的實現，而且視圖層層渲染抽象成一個函數。不同于中的實現，這里少了很多各種標記和應用標記的過程。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧首先我們思考一下截止當前，我們都做了什么通過 defineReactive 這個函數，實現了對于數據取值和設置的監聽通過 Dep 類，實現了依賴的管理通過 Wa...

CoffeX 2019-08-22 16:17 評論0 收藏0