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

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

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

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

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

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

我們先從最簡(jiǎn)單的開始：

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

a.b = 2;   // b被修改，新b=2
a.b;       // b被訪問(wèn)

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

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

在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){
        // 通過(guò) hasOwnProperty 過(guò)濾掉一個(gè)對(duì)象本身?yè)碛械膶傩?
        if(obj.hasOwnProperty(key)){
            val = obj[key];
            // 遞歸調(diào)用 循環(huán)所有對(duì)象出來(lái)
            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 + "被訪問(wèn)");
        },
        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被訪問(wèn)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95249.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Labradors 2019-08-23 12:31 評(píng)論0 收藏0