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

ralap 發布于2019-08-23 18:25 / 2264人閱讀

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

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

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

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

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

data 的數據是怎么可以通過實例直接訪問的？

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

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

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

初始化數據

實例使用 initData 初始化數據，如下

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 數據，如果data 是函數，就執行拿到返回值，否則直接拿設置的對象data

第二，保存data 數據

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

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

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

2、代理開花

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

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

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

Vue官網也說明了

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

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 函數，來達到代理，移花接木的過程

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

于是就會設置成這樣

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

這樣的作用，有四個

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

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

2、保證數據統一

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

3、不影響依賴收集

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

4、不影響依賴更新

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

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

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

【Vue原理】Props - 源碼版

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

light 2019-08-23 18:32 評論0 收藏0
用proxy實現一個更優雅的vue

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

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

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

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

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

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

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

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