成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

VUE - MVVM - part1 - defineProperty

liukai90 / 2348人閱讀

摘要：在中關(guān)于如何實(shí)現(xiàn)在網(wǎng)上可以搜出不少，在看了部分源碼后，梳理一下內(nèi)容。換個(gè)說(shuō)法，當(dāng)我們?nèi)≈档臅r(shí)候，函數(shù)自動(dòng)幫我們添加了針對(duì)當(dāng)前值的依賴，當(dāng)這個(gè)值發(fā)生變化的時(shí)候，處理了這些依賴，比如說(shuō)節(jié)點(diǎn)的變化。

在 VUE 中關(guān)于如何實(shí)現(xiàn)在網(wǎng)上可以搜出不少，在看了部分源碼后，梳理一下內(nèi)容。

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

一般情況下我們?yōu)橐粋€(gè)對(duì)象添加一個(gè)屬性一般都會(huì)這么寫

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

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

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

這樣寫雖然代碼量多了不少，但是卻擁有了控制屬性取值和設(shè)置值的權(quán)利，讓我們來(lái)測(cè)試一下。

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

接著我們把 defindProperty 這個(gè)函數(shù)封裝同時(shí)改造一下，方便我們調(diào)用

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
        }
    })
}

可以從代碼中看出來(lái)，我在函數(shù)內(nèi)部聲明了一個(gè)數(shù)組用于存放 callback 中的 target，當(dāng)對(duì) object 進(jìn)行 get 操作(取值操作)的時(shí)候，就會(huì)往 array 中存放函數(shù)，進(jìn)行 set 操作(設(shè)置值)的時(shí)候執(zhí)行 array 中的函數(shù)?？纯葱Ч绾?/p> 

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

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

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

callback.target = null
object.test = "test3"
// 我被添加進(jìn)去了，新的值是：test3
// 添加第二個(gè)函數(shù)，新的值是：test3

這樣我們就達(dá)成了在 object.test 的值發(fā)生改變時(shí)，運(yùn)行一個(gè)函數(shù)隊(duì)列（雖然這個(gè)隊(duì)列挺簡(jiǎn)陋的）的目的。

換個(gè)說(shuō)法，當(dāng)我們?nèi)≈档臅r(shí)候，函數(shù)自動(dòng)幫我們添加了針對(duì)當(dāng)前值的依賴，當(dāng)這個(gè)值發(fā)生變化的時(shí)候，處理了這些依賴，比如說(shuō) DOM 節(jié)點(diǎn)的變化。

這個(gè)也是 VUE 中實(shí)現(xiàn) MVVM 的最核心的代碼，當(dāng)然在 VUE 中，這個(gè)依賴收集的過(guò)程遠(yuǎn)比現(xiàn)在的代碼要復(fù)雜，這里僅僅實(shí)現(xiàn)了依賴的收集和觸發(fā)，對(duì)于依賴的管理這里的代碼還做不到。
只是簡(jiǎn)單的了解一下 VUE 中依賴收集的過(guò)程，關(guān)于如何去完美的收集依賴，還需要了解幾個(gè)感念，之后再說(shuō)。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94141.html

相關(guān)文章

  • VUE - MVVM - part2 - Dep

    摘要：看這篇之前，如果沒看過(guò)先移步看實(shí)現(xiàn)中。同樣的，在取值時(shí)收集依賴，在設(shè)置值當(dāng)值發(fā)生變化時(shí)觸發(fā)依賴。中實(shí)現(xiàn)了一個(gè)的類來(lái)處理以上兩個(gè)問(wèn)題，之后再說(shuō)。以下語(yǔ)法下的，源碼中差不多就這樣點(diǎn)擊查看相關(guān)代碼系列文章地址優(yōu)化優(yōu)化總結(jié) 看這篇之前，如果沒看過(guò) step1 先移步看 實(shí)現(xiàn) VUE 中 MVVM - step1 - defineProperty。 在上一篇我們大概實(shí)現(xiàn)了，Vue 中的依賴收集和...

    hover_lew 評(píng)論0 收藏0

  • VUE - MVVM - part6 - Array

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

    0x584a 評(píng)論0 收藏0

  • VUE - MVVM - part9 - Vue

    摘要：調(diào)用父類的方法類在我們上一步已經(jīng)實(shí)現(xiàn)。我們先實(shí)現(xiàn)的綁定，因?yàn)槭且槐O(jiān)聽，所以要進(jìn)行進(jìn)一步的處理。調(diào)用父類的方法方法綁定完事，其實(shí)就這么簡(jiǎn)單。 看這篇之前，如果沒有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。 前言 激動(dòng)人心的時(shí)候即將來(lái)臨，之前我們做的 8 步，其實(shí)都在為這一步打基礎(chǔ)，這一步，我們來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè) Vue 對(duì)象，還沒有看過(guò)之前代碼的同學(xué)，請(qǐng)確認(rèn)看過(guò)之前的文章。 主要實(shí)現(xiàn)內(nèi)...

    yzd 評(píng)論0 收藏0

  • VUE - MVVM - part5 - Observe

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

    xi4oh4o 評(píng)論0 收藏0

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

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

    CoffeX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<