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

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

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

參考版本 vue源碼版本：0.11
相關

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

在MDN上查看有關 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 中

// 觀察者構造函數
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];
            // 遞歸調用 循環(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云服務器 vue實例屬性 vue.js 屬性 vue的計算屬性 vue源碼

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

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

vue源碼學習：Object.defineProperty 對數組監(jiān)聽

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

CatalpaFlat 2019-08-26 11:54 評論0 收藏0
JavaScript 進階之深入理解數據雙向綁定

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

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

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

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

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

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

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

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