對(duì)象的計(jì)算屬性

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

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...

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

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

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

相關(guān)文章

Vue.js-計(jì)算屬性和class與style綁定

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

Shihira 2019-08-23 16:02 評(píng)論0 收藏0
【Vue計(jì)算屬性】

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

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

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

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

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

Mike617 2019-08-23 11:46 評(píng)論0 收藏0
瀏覽器內(nèi)核之 CSS 解釋器和樣式布局

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

_Dreams 2019-08-29 16:40 評(píng)論0 收藏0
瀏覽器內(nèi)核之 CSS 解釋器和樣式布局

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

xiangchaobin 2019-08-23 11:50 評(píng)論0 收藏0