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

ralap 發(fā)布于2019-08-23 18:25 / 2286人閱讀

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

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

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

寫這篇文章，我就是為了記錄我對 Data 的一個疑問的探索，很簡短

data 的數(shù)據(jù)是怎么可以通過實例直接訪問的？

第一想法，或許是，遍歷逐個復制？

但是其實并不是，這里涉及的一個詞，叫【代理】

怎么代理呢？聽我慢慢說，抓住逐個疑問，跟著我慢慢探索

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

實例使用 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 (只要不是_和$開頭的屬性) {
    
            proxy(vm, "_data", key);     
        }   
    } 
    
}

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

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

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

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

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

2、代理開花

接下來，就放大招了，到了【data 代理】的重點了，看上面的源碼最后

會遍歷data對象，如果屬性名不是【_ 或者 $】開頭的話，就會被設置代理

至于為什么避開那兩個開頭的屬性？

Vue官網也說明了

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

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;

        }
    });
}

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

可能這么看不太直觀，我以一個屬性為例寫清楚點

于是就會設置成這樣

下面是給 _data 屬性設置響應式的簡化代碼

這樣的作用，有四個

1、可以直接通過 vm 訪問到name

簡化寫法，你看看 React 這個比，訪問 state，需要 http://this.state.xxx 寫多一層很麻煩啊，Vue 做了一層代理就很好，但是呢，成本會大一些

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

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

3、不影響依賴收集

當訪問【vm.name】，觸發(fā)代理【vm.name 設置的get】，就會訪問【vm._data.name】，從而觸發(fā)總部【vm._data.name 設置的get】，這個get 用來依賴收集。最后完全不會影響

4、不影響依賴更新

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

GPU云服務器云服務器 vue源碼 vue webrtc 源碼 vue安卓版代理原理

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

轉載請注明本文地址：http://systransis.cn/yun/105199.html

【Vue原理】Props - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Props - 源碼版今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。幸好我做...

light 2019-08-23 18:32 評論0 收藏0
用proxy實現(xiàn)一個更優(yōu)雅的vue

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

objc94 2019-08-22 18:08 評論0 收藏0
Vue雙向綁定的實現(xiàn)原理系列（三）：監(jiān)聽器Observer和訂閱者Watcher

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

widuu 2019-08-26 11:37 評論0 收藏0
Vue雙向綁定的實現(xiàn)原理系列（三）：監(jiān)聽器Observer和訂閱者Watcher

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

legendaryedu 2019-08-01 18:33 評論0 收藏0
了解MVVM及Vue實現(xiàn)原理，手把手帶你擼源碼。

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

cooxer 2019-08-23 16:43 評論0 收藏0