vue源碼學(xué)習(xí)：Object.defineProperty 對象屬性監(jiān)聽

teren 發(fā)布于2019-08-22 17:31 / 1779人閱讀

摘要：參考版本源碼版本相關(guān)實現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是，讓我們先來看下這個函數(shù)。我們可能會有對象中屬性的值還是對象這種嵌套情況，可以通過遞歸解決在源代碼文件中觀察者構(gòu)造函數(shù)通過過濾掉一個對象本身擁有的屬性遞歸調(diào)用循環(huán)所有對象出來被訪問被修改，新被訪問

參考版本 vue源碼版本：0.11
相關(guān)

vue實現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是 Object.defineProperty ，讓我們先來看下這個函數(shù)。

在MDN上查看有關(guān) Object.defineProperty 的解釋。

我們先從最簡單的開始：

let a = {"b": 1};
Object.defineProperty(a, "b", {
    enumerable: false,
    configurable: false,
    get: function(){
        console.log("b" + "被訪問");
    },
    set: function(newVal){
        console.log("b" + "被修改，新" + "b" + "=" + newVal);
    }
});

a.b = 2;   // b被修改，新b=2
a.b;       // b被訪問

這樣，我們就能監(jiān)聽對象了！但問題并不僅僅這么簡單。。。

我們可能會有對象中屬性的值還是對象這種嵌套情況，可以通過遞歸解決！

在vue源代碼文件 srcobserveobserver.js 中

// 觀察者構(gòu)造函數(shù)
function Observer(data){
    this.data = data;
    this.walk(data);
}

let p = Observer.prototype;

p.walk = function(obj){
    let val;
    for(let key in obj){
        // 通過 hasOwnProperty 過濾掉一個對象本身擁有的屬性 
        if(obj.hasOwnProperty(key)){
            val = obj[key];
            // 遞歸調(diào)用 循環(huán)所有對象出來
            if(typeof val === "object"){
                new Observer(val);
            }
            this.convert(key, val);
        }
    }
};

p.convert = function(key, val){
    Object.defineProperty(this.data, key, {
        enumerable: false,
        configurable: false,
        get: function(){
            console.log(key + "被訪問");
        },
        set: function(newVal){
            console.log(key + "被修改，新" + key + "=" + newVal);
            if(newVal === val) return ;
            val = newVal;
        }
    })
};

let data = {
    user: {
        name: "zhangsan",
        age: 14
    },
    address: {
        city: "beijing"
    }
}

let app = new Observer(data);

data.user.name;    // user被訪問

GPU云服務(wù)器云服務(wù)器 vue實例屬性 vue.js 屬性 vue的計算屬性 vue源碼

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

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

相關(guān)文章

vue源碼學(xué)習(xí)：Object.defineProperty 對數(shù)組監(jiān)聽

摘要：對于框架如何實現(xiàn)數(shù)組變化的監(jiān)測，大多數(shù)情況下，框架會重寫方法，并生成一個新的數(shù)組賦值給數(shù)據(jù)，這樣數(shù)據(jù)雙向綁定就會觸發(fā)。實現(xiàn)簡單的對數(shù)組的變化的監(jiān)聽指向可通過下面的測試看出通過輸出，可以看出上面所述指向的是在官方文檔，所需監(jiān)視的只有種方法。上一篇中，我們介紹了一下defineProperty 對對象的監(jiān)聽，這一篇我們看下defineProperty 對數(shù)組的監(jiān)聽數(shù)組的變化先讓我們了解...

CatalpaFlat 2019-08-26 11:54 評論0 收藏0
JavaScript 進(jìn)階之深入理解數(shù)據(jù)雙向綁定

摘要：當(dāng)我們的視圖和數(shù)據(jù)任何一方發(fā)生變化的時候，我們希望能夠通知對方也更新，這就是所謂的數(shù)據(jù)雙向綁定。返回值返回傳入函數(shù)的對象，即第一個參數(shù)該方法重點(diǎn)是描述，對象里目前存在的屬性描述符有兩種主要形式數(shù)據(jù)描述符和存取描述符。前言談起當(dāng)前前端最熱門的 js 框架，必少不了 Vue、React、Angular，對于大多數(shù)人來說，我們更多的是在使用框架，對于框架解決痛點(diǎn)背后使用的基本原理往往關(guān)注...

sarva 2019-08-20 18:28 評論0 收藏0
用vue框架的基本原理，簡單實現(xiàn)一個todo-list

摘要：前言最近在學(xué)習(xí)框架的基本原理，看了一些技術(shù)博客以及一些對源碼的簡單實現(xiàn)，對數(shù)據(jù)代理數(shù)據(jù)劫持模板解析變異數(shù)組方法雙向綁定有了更深的理解。前言最近在學(xué)習(xí)vue框架的基本原理，看了一些技術(shù)博客以及一些對vue源碼的簡單實現(xiàn)，對數(shù)據(jù)代理、數(shù)據(jù)劫持、模板解析、變異數(shù)組方法、雙向綁定有了更深的理解。于是乎，嘗試著去實踐自己學(xué)到的知識，用vue的一些基本原理實現(xiàn)一個簡單的todo-list，完成...

Karrdy 2019-08-20 18:31 評論0 收藏0
Vue源碼學(xué)習(xí)（二）——從宏觀看Vue

摘要：上一篇文章我們寫到從入口文件一步步找到的構(gòu)造函數(shù)，現(xiàn)在我們要去看看實例化經(jīng)歷的過程的構(gòu)造函數(shù)我們知道的構(gòu)造函數(shù)在中不明白的可以去看上一篇文章源碼學(xué)習(xí)筆記一。上一篇文章我們寫到從入口文件一步步找到Vue的構(gòu)造函數(shù)，現(xiàn)在我們要去看看Vue實例化經(jīng)歷的過程 Vue的構(gòu)造函數(shù) 我們知道Vue的構(gòu)造函數(shù)在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 評論0 收藏0
Vue雙向綁定原理，教你一步一步實現(xiàn)雙向綁定

摘要：儲存訂閱器因為屬性被監(jiān)聽，這一步會執(zhí)行監(jiān)聽器里的方法這一步我們把也給弄了出來，到這一步我們已經(jīng)實現(xiàn)了一個簡單的雙向綁定了，我們可以嘗試把兩者結(jié)合起來看下效果?？偨Y(jié)本文主要是對雙向綁定原理的學(xué)習(xí)與實現(xiàn)。當(dāng)今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足于前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。所以我們要時刻保持好奇心，擁抱變化，...

Labradors 2019-08-23 12:31 評論0 收藏0