亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

【Vue原理】代理 Data - 源碼版

ralap / 2319人閱讀

摘要：最后完全不會(huì)影響不影響依賴(lài)更新賦值，觸發(fā)代理設(shè)置的，就會(huì)直接賦值給總部，從而觸發(fā)設(shè)置的，這個(gè)，用來(lái)依賴(lài)更新。

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】代理 Data - 源碼版

寫(xiě)這篇文章，我就是為了記錄我對(duì) Data 的一個(gè)疑問(wèn)的探索，很簡(jiǎn)短

data 的數(shù)據(jù)是怎么可以通過(guò)實(shí)例直接訪問(wèn)的？

第一想法，或許是，遍歷逐個(gè)復(fù)制？

但是其實(shí)并不是，這里涉及的一個(gè)詞，叫 【代理】

怎么代理呢？聽(tīng)我慢慢說(shuō)，抓住逐個(gè)疑問(wèn)，跟著我慢慢探索



初始化數(shù)據(jù)

實(shí)例使用 initData 初始化數(shù)據(jù)，如下

function initData(vm) {     

    var data = vm.$options.data;    

    var keys = Object.keys(data);   

    var i = keys.length;

    data = vm._data =

    ( typeof data === "function" ?

        data.call(vm) : data ) || {};   



    while (i--) {   

        var key = keys[i];  

        if (只要不是_和$開(kāi)頭的屬性) {
    
            proxy(vm, "_data", key);     
        }   
    } 
    
}

首先，拿到 data 數(shù)據(jù)，如果data 是函數(shù)，就執(zhí)行拿到返回值，否則直接拿設(shè)置的對(duì)象data

第二，保存data 數(shù)據(jù)

源碼中你可以看到，把 data 保存到實(shí)例上了

vm._data = 
    typeof data === "function" ? 
        data.call(vm) : data

初始化數(shù)據(jù)，是為了拿到數(shù)據(jù)，然后放到存到實(shí)例上，作為代理總部



2、代理開(kāi)花

接下來(lái)，就放大招了，到了【data 代理】 的重點(diǎn)了，看上面的源碼最后

會(huì)遍歷data對(duì)象，如果屬性名不是 【_ 或者 $】 開(kāi)頭的話，就會(huì)被設(shè)置代理

至于為什么避開(kāi)那兩個(gè)開(kāi)頭的屬性？

Vue官網(wǎng)也說(shuō)明了

剩下的其他屬性，會(huì)被設(shè)置代理，現(xiàn)在我們來(lái)看設(shè)置代理的那句話

proxy(vm,"_data",key)

proxy 是什么？不要急，等我放上源碼

function proxy(target, sourceKey, key) {    

    Object.defineProperty(target, key, {

        get() {            

            return this[sourceKey][key]

        },

        set(val) {            

            this[sourceKey][key] = val;

        }
    });
}

明白嗎？通過(guò) Object.defineProperty 設(shè)置 get 和 set 函數(shù)，來(lái)達(dá)到代理，移花接木的過(guò)程

可能這么看不太直觀，我以一個(gè)屬性為例寫(xiě)清楚點(diǎn)

于是就會(huì)設(shè)置成這樣

下面是給 _data 屬性設(shè)置響應(yīng)式的簡(jiǎn)化代碼

這樣的作用，有四個(gè)

1、可以直接通過(guò) vm 訪問(wèn)到name

簡(jiǎn)化寫(xiě)法，你看看 React 這個(gè)比，訪問(wèn) state，需要 http://this.state.xxx 寫(xiě)多一層 很麻煩啊，Vue 做了一層代理就很好，但是呢，成本會(huì)大一些

2、保證數(shù)據(jù)統(tǒng)一

如果是開(kāi)篇想的那樣，逐個(gè)賦值，數(shù)據(jù)改變的時(shí)候，就要同時(shí)維護(hù)兩份啊，簡(jiǎn)直是地獄啊。但是 methods 的處理是直接復(fù)制到實(shí)例上的

3、不影響依賴(lài)收集

當(dāng)訪問(wèn) 【vm.name】，觸發(fā)代理 【vm.name 設(shè)置的get】，就會(huì)訪問(wèn) 【vm._data.name】 ，從而觸發(fā)總部 【vm._data.name 設(shè)置的get】，這個(gè)get 用來(lái)依賴(lài)收集。最后完全不會(huì)影響

4、不影響依賴(lài)更新

賦值 【vm.name】，觸發(fā)代理 【vm.name 設(shè)置的 set】，就會(huì)直接賦值給總部 【vm._data.name】 ，從而觸發(fā) 【vm._data.name 設(shè)置的set 】，這個(gè)set，用來(lái)依賴(lài)更新。最后完全不會(huì)影響

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

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

相關(guān)文章

  • 【Vue原理】Props - 源碼版

    寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過(guò)了，也真是會(huì)隨著時(shí)間慢慢忘記的。 幸好我做...

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

  • 用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue

    摘要：以上引用內(nèi)容來(lái)自阮一峰的教程的章節(jié)原文地址請(qǐng)戳這里。最后本文最終實(shí)現(xiàn)代碼已經(jīng)放在上，想要直接看效果的同學(xué)，可以上去直接，運(yùn)行。 前言 如果你有讀過(guò)Vue的源碼，或者有了解過(guò)Vue的響應(yīng)原理，那么你一定知道Object.defineProperty(),那么你也應(yīng)該知道，Vue 2.x里，是通過(guò) 遞歸 + 遍歷 data對(duì)象來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控的，你可能還會(huì)知道，我們使用的時(shí)候，直接通過(guò)數(shù)...

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

  • Vue雙向綁定的實(shí)現(xiàn)原理系列（三）：監(jiān)聽(tīng)器Observer和訂閱者Watcher

    摘要：至此監(jiān)聽(tīng)器和訂閱者功能基本完成，后面再加上指令解析器的功能系列文章的目錄雙向綁定的實(shí)現(xiàn)原理系列一雙向綁定的實(shí)現(xiàn)原理系列二設(shè)計(jì)模式雙向綁定的實(shí)現(xiàn)原理系列三監(jiān)聽(tīng)器和訂閱者雙向綁定的實(shí)現(xiàn)原理系列四補(bǔ)充指令解析器 監(jiān)聽(tīng)器Observer和訂閱者Watcher 實(shí)現(xiàn)簡(jiǎn)單版Vue的過(guò)程，主要實(shí)現(xiàn){{}}、v-model和事件指令的功能 主要分為三個(gè)部分 github源碼 1.數(shù)據(jù)監(jiān)聽(tīng)器Obser...

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

  • Vue雙向綁定的實(shí)現(xiàn)原理系列（三）：監(jiān)聽(tīng)器Observer和訂閱者Watcher

    摘要：至此監(jiān)聽(tīng)器和訂閱者功能基本完成，后面再加上指令解析器的功能系列文章的目錄雙向綁定的實(shí)現(xiàn)原理系列一雙向綁定的實(shí)現(xiàn)原理系列二設(shè)計(jì)模式雙向綁定的實(shí)現(xiàn)原理系列三監(jiān)聽(tīng)器和訂閱者雙向綁定的實(shí)現(xiàn)原理系列四補(bǔ)充指令解析器 監(jiān)聽(tīng)器Observer和訂閱者Watcher 實(shí)現(xiàn)簡(jiǎn)單版Vue的過(guò)程，主要實(shí)現(xiàn){{}}、v-model和事件指令的功能 主要分為三個(gè)部分 github源碼 1.數(shù)據(jù)監(jiān)聽(tīng)器Obser...

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

  • 了解MVVM及Vue實(shí)現(xiàn)原理，手把手帶你擼源碼。

    摘要：方法實(shí)現(xiàn)將所有屬性掛載在觀察對(duì)象，將每一項(xiàng)做一個(gè)數(shù)據(jù)劫持就是將中每一項(xiàng)用定義新屬性并返回這個(gè)對(duì)象。當(dāng)和發(fā)生變化時(shí)，自動(dòng)會(huì)觸發(fā)視圖更新，獲取得到的也就是最新值。 MVVM及Vue實(shí)現(xiàn)原理 Github源碼地址：https://github.com/wyj2443573... mvvm 雙向數(shù)據(jù)綁定數(shù)據(jù)影響視圖，視圖影響數(shù)據(jù)angular 臟值檢測(cè) vue數(shù)據(jù)劫持+發(fā)布訂閱模式vue 不...

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

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

0條評(píng)論

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