對象的計算屬性

klivitamJ 發(fā)布于2019-08-23 16:54 / 1892人閱讀

var Dep = {
    target: null
};

function defineComputed(obj, key, computeFunc) {
    computeFunc = computeFunc.bind(obj);
    var value;
    Dep.target = function() {
        value = computeFunc();
    };
    value = computeFunc();
    Object.defineProperty(obj, key, {
        get: function() {
            return value;
        },
        set: function() {
            // don"t do anything. can"t set computed funcs
        }
    })
}
function defineReactive(obj, key, val) {
    // all computed properties that depend on this
    var deps = [];
    
    Object.defineProperty(obj, key, {
        get: function() {
            // Check if there"s a computed property which "invoked"
            // this getter. Also check that it"s already not a dependency
            if (Dep.target) {
                // add the dependency
                deps.push(Dep.target);
                Dep.target = null;
            }
            return val;
        },
        set: function(newValue) {
            if (val === newValue) return;
            val = newValue;
            
            // notify all dependent computed properties
            deps.forEach(func => func());
        }
    })
}

var obj = {};
defineReactive(obj, "a", 0);
defineReactive(obj, "c", 10);
defineComputed(obj, "b", function() {
    console.log(1);
    return this.a + this.c;
});


obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

參考文檔：
https://www.cnblogs.com/kidne...
https://skyronic.com/blog/vue...

GPU云服務器云服務器對象的屬性匹配對象的屬性和函數(shù) js中集合對象的屬性 js包裝對象中的屬性

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

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

Vue.js-計算屬性和class與style綁定

摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當?shù)谋磉_式過長或邏輯復雜時，還可以綁定一個計算屬性。學習筆記：前端開發(fā)文檔計算屬性所有的計算屬性都以函數(shù)的形式寫在Vue實例中的computed選項內，最終返回計算后的結果。計算屬性的用法在一個計算屬性中可以完成各種復雜的邏輯，包括運算、函數(shù)調用等，只要最終...

Shihira 2019-08-23 16:02 評論0 收藏0
【Vue計算屬性】

摘要：計算屬性語法在構造函數(shù)的參數(shù)對象中有一個屬性，該屬性就是用于定義計算屬性的，該對象中的鍵也就是我們的計算屬性，與不同的是，計算屬性的鍵值是一個擁有返回值的函數(shù)，該函數(shù)中可以訪問到中的所有屬性。我們都知道在Vue構造函數(shù)的參數(shù)對象中有一個【data】屬性，該屬性值是一個對象，該對象是對數(shù)據的代理，是一個鍵值對并且時刻與頁面表現(xiàn)是一致的，但是這里面只能是簡單的鍵值對，不能擁有業(yè)務邏輯，并...

王陸寬 2019-08-20 18:31 評論0 收藏0
【Vue 2.0】核心源碼解讀 -- 不定期更新

摘要：觀察員由模板解析指令創(chuàng)建的觀察員負責模板中的更新視圖操作。觀察員種類目前了解情況來看主要分三類視圖指令的計算屬性的用戶自定義的介紹關于 Vue.js 的原理一直以來都是一個話題。經過幾天的源碼學習和資料介紹，我將一些個人理解的經驗給寫下來，希望能夠與大家共勉。附上GITHUB源碼地址, 如果有任何不解可以在文章下面提出或者寫下issue, 方便大家回答和學習, 有興趣可以St...

sunsmell 2019-08-21 16:51 評論0 收藏0
Vue 數(shù)據響應式原理

摘要：接下來，我們就一起深入了解的數(shù)據響應式原理，搞清楚響應式的實現(xiàn)機制?；卣{函數(shù)只是打印出新的得到的新的值，由執(zhí)行后生成。及異步更新相信讀過前文，你應該對響應式原理有基本的認識。前言 Vue.js 的核心包括一套響應式系統(tǒng)。響應式，是指當數(shù)據改變后，Vue 會通知到使用該數(shù)據的代碼。例如，視圖渲染中使用了數(shù)據，數(shù)據改變后，視圖也會自動更新。舉個簡單的例子，對于模板： {{ name ...

Mike617 2019-08-23 11:46 評論0 收藏0
瀏覽器內核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內核之解釋器和模型本文剖析的解釋器和樣式布局。根據生成解釋器類。而后將解釋后的信息設置到元素的屬性的樣式中，然后設置標記表明該元素需要重新計算樣式，并觸發(fā)重新計算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決...

_Dreams 2019-08-29 16:40 評論0 收藏0
瀏覽器內核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內核之解釋器和模型本文剖析的解釋器和樣式布局。根據生成解釋器類。而后將解釋后的信息設置到元素的屬性的樣式中，然后設置標記表明該元素需要重新計算樣式，并觸發(fā)重新計算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決...

xiangchaobin 2019-08-23 11:50 評論0 收藏0