快捷導(dǎo)航

Vue.js中的computed功能設(shè)計

更新時間：2023年06月08日 09:12:17 作者：GoldenFingers

computed作為計算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時計算屬性會重新計算，更新邏輯計算的結(jié)果，這篇文章主要介紹了Vue.js中的computed的功能設(shè)計,需要的朋友可以參考下

1、關(guān)于computed的功能描述

computed作為計算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時計算屬性會重新計算，更新邏輯計算的結(jié)果。

有個體現(xiàn)計算屬性特點的便是比較計算屬性和方法的區(qū)別，比如我們需要計算兩個響應(yīng)式數(shù)據(jù)的和

const obj = new reactive({foo: 1, bar: 2})
// 使用計算屬性獲取值
const value = computed(() => {obj.foo + obj.bar})
// 使用方法獲取值
const value = () => obj.foo + obj.bar

其區(qū)別為computed有緩存機(jī)制，當(dāng)內(nèi)部依賴的響應(yīng)式數(shù)據(jù)沒有改變時則直接從緩存中獲取結(jié)果，而方法則每次都需要執(zhí)行。當(dāng)依賴的響應(yīng)式數(shù)據(jù)很多并且邏輯很復(fù)雜的時候那么計算屬性效率會比方法高很多。

2、計算屬性的lazy設(shè)計

對于計算屬性我們只有在需要值的時候才需要計算，而computed(getter)以一個getter作為參數(shù)，即每次計算屬性依賴的響應(yīng)式數(shù)據(jù)改變的時候都需要重新執(zhí)行getter，但是每次getter的每一次執(zhí)行卻是不必要的，因為只有當(dāng)獲取計算屬性的值時才運行getter獲取值，所以對于getter的計算需要懶惰執(zhí)行。

在上一章節(jié)中已經(jīng)介紹了調(diào)度器的作用，所以我們只需要在調(diào)度器中加入一個lazy的標(biāo)記就行了

effect(() => {
    return obj.foo + obj.bar
}, {
	// 調(diào)度器中設(shè)置lazy標(biāo)記
    lazy: true
})
function effect(fn, options = {}) {
    const effectFn = () => {
      	// 省略代碼
    }
    effectFn.options = options
    effectFn.deps = []
	// 如過有緩存標(biāo)記則直接返回
    if(options.lazy)
        return effectFn
    effectFn()
}
function computed(getter) {
    // 把getter作為一個副作用函數(shù)
    const effectFn = effect(getter, {
        lazy: true,
    })
    const obj = {
        // 只有當(dāng)讀取到value時才會觸發(fā)effectFn
        get value() {
            return effectFn()
        }
    }
    return obj.value
}

這樣只有我們在獲取計算屬性的value時才會觸發(fā)副作用函數(shù)執(zhí)行，而不會在響應(yīng)式數(shù)據(jù)改變時就直接執(zhí)行。

3、計算屬性的緩存

假設(shè)我們在上述代碼的設(shè)計基礎(chǔ)下有以下代碼

const sum = computed(() => obj.foo + obj.bar)
console.log(sum.value)
console.log(sum.value)
console.log(sum.value)

此時effectFn會接連執(zhí)行三次，但是每次的結(jié)果都是一樣的，因為計算屬性所依賴的obj.foo \obj.bar的值并沒有改變，所以我們可以直接將計算的結(jié)果緩存下來。

function computed(getter) {
    // 用來緩存計算的結(jié)果
    let value
    // 用于標(biāo)記是否需要重新計算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true
    }) 
    const obj = {
        get value() {
            // 如過需要重新計算值
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

此時我們多次獲取sum.value的值則不會每次都重新計算了，但是這樣寫有一個非常明顯的問題就是我們所依賴的響應(yīng)式的值改變的時候不會重新計算，所以我們dirty這個標(biāo)記還需要和依賴的響應(yīng)式數(shù)據(jù)聯(lián)系起來。具體做法是將dirty放入調(diào)度器中，這樣每次響應(yīng)式數(shù)據(jù)被改變的時候都會觸發(fā)調(diào)度器改變dirty的值

function computed(getter) {
    // 用來緩存計算的結(jié)果
    let value
    // 用于標(biāo)記是否需要重新計算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true,
        // 當(dāng)響應(yīng)式數(shù)據(jù)修改時，觸發(fā)副作用函數(shù)時修改dirty的值
        scheduler: () => {
            dirty = true
        }
    }) 
    const obj = {
        get value() {
            // 如過需要重新計算值
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

其實還有一個問題就是當(dāng)計算屬性放入effect形成嵌套時，我們改變obj的值并不會觸發(fā)外層的effect函數(shù)，即：

// 省略代碼......
const sum = computed(() => obj.foo + obj.bar)
effect(() => {
    console.log(sum.value)
})

當(dāng)改變obj.foo/obj.bar的值并不會輸出sum.value的值。這是不符合應(yīng)用場景的，在應(yīng)用中當(dāng)我們的計算屬性改變的時候頁面也會重新渲染。

整個問題分析一下就是effect嵌套的問題，當(dāng)內(nèi)層的響應(yīng)式數(shù)據(jù)只和getter形成了聯(lián)系，和外層的副作用函數(shù)并沒有關(guān)系，而內(nèi)部的value并不是響應(yīng)式數(shù)據(jù)還是懶執(zhí)行的，所以也就不會和外層的副作用函數(shù)產(chǎn)生聯(lián)系了，這里解決的方案就是直接手動將計算屬性的結(jié)果和外層副作用函數(shù)聯(lián)系起來。

function computed(getter) {
    let value
    let dirty = true
    const effectFn = effect(getter, {
        lazy: true,
        scheduler: () => {
            dirty = true
            // 計算屬性依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時，手動觸發(fā)響應(yīng)
            trigger(obj, 'value')
        }
    })
    const obj = {
        get value() {
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            // 讀取value時手動追蹤
            track(obj, 'value')
            return value
        }
    }
    return obj
}

到此這篇關(guān)于Vue.js中的computed的設(shè)計的文章就介紹到這了,更多相關(guān)Vue.js computed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: