vue面試?？贾甤omputed是如何實現的

更新時間：2023年08月04日 09:51:30 作者：前端胖頭魚

對于每天都在用的計算屬性(computed)，小編猜大家肯定也想窺探其奧妙與原理對吧，所以這篇文章就來講講computed是如何實現的吧，感興趣的小伙伴可以學習一下

前言

通過前面幾篇文章，我們對Vue3中的響應式設計有了初步的了解。

而對于每天都在用的計算屬性(computed)，我猜你肯定也想窺探其奧妙與原理對吧！走起?。。?/p>

從computed的特性出發(fā)

computed最耀眼的幾個特性是啥？

1. 依賴追蹤

import?{?reactive,?computed?}?from?'vue'
const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3,
})
const?sum?=?computed(()?=>?{
??return?state.a?+?state.b
})

我們定義了一個響應式數據state和一個計算屬性sum, Vue會自動追蹤sum依賴的數據state.a和state.b，并建立相應的依賴關系。

也就是只有state.a和state.b發(fā)生變化的時候，sum才會重新計算而state.c任由它怎么變，sum都將絲毫不受影響。

2. 緩存

還是上面的例子，如果state.a和state.b打死都不再改變值了，那么我們讀取sum的時候，它將會返回上一次計算的結果，而不是重新計算。

3. 懶計算

這個特性比較容易被忽略，簡單地說只有計算屬性真正被使用（讀?。┑臅r候才會進行計算，否則咱就僅僅是定義了一個變量而已。

import?{?reactive,?computed?}?from?'vue'
const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3
})
const?sum?=?computed(()?=>?{
??console.log('執(zhí)行計算')
??return?state.a?+?state.b
})
setTimeout(()?=>?{
??//?沒有讀取sum.value之前，sum不會進行計算
??console.log('1-sum',?sum.value)
??//?我們改變了a的值，但是sum并不會立刻進行計算
??state.a?=?4
??setTimeout(()?=>?{
????//?而是要等到再次讀取的時候才會觸發(fā)重新計算
????console.log('2-sum',?sum.value)
??},?1000)
},?1000)

挨個實現computed特性

1. 懶計算

我們依舊圍繞effect函數來搞事情，到目前為止，effect注冊的回調都是立刻執(zhí)行。

const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3
})
//?有沒有很像計算屬性的感覺
const?sum?=?effect(()?=>?{
??console.log('執(zhí)行計算')?//?立刻被打印
??const?value?=?state.a?+?state.b
??return?value
})
console.log(sum)?//?undefined

想要實現computed的懶執(zhí)行，咱們可以參考上篇文章Vue3：原來你是這樣的“異步更新”的思路，添加一個額外的參數lazy。

它要實現的功能是：如果傳遞了lazy為true，副作用函數將不會立即執(zhí)行，而是將執(zhí)行的時機交還給用戶，由用戶決定啥時候執(zhí)行。

當然啦！回調的結果我們也應該一并返回（例如上面的value值）

你能想象，我們僅僅需要改造幾行代碼就能離computed近了一大步。

const?effect?=?function?(fn,?options?=?{})?{
??const?effectFn?=?()?=>?{
????//?...?省略
????//?新增res存儲fn執(zhí)行的結果
????const?res?=?fn()
????//?...?省略
????//?新增返回結果
????return?res
??}
??//?...?省略
??//?新增，只有l(wèi)azy不為true時才會立即執(zhí)行
??if?(!options.lazy)?{
????effectFn()
??}
??//?新增，返回副作用函數讓用戶執(zhí)行
??return?effectFn
}

測試一波

const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3,
});
//?有沒有很像計算屬性的感覺
const?sum?=?effect(()?=>?{
??console.log("執(zhí)行計算");?//?調用sum函數后被打印
??const?value?=?state.a?+?state.b;
??return?value;
},?{
??lazy:?true
});
//?不執(zhí)行sum函數，effect注冊的回調將不會執(zhí)行
console.log(sum());?//?3

2. 依賴追蹤

咱們初步實現了懶執(zhí)行的特性，為了更像computed一點，我們需要封裝一個函數。

function?computed?(getter)?{
??const?effectFn?=?effect(getter,?{
????lazy:?true,
??})
??const?obj?=?{
????get?value?()?{
??????return?effectFn()
????}
??}
??return?obj
}

這就有點那么味道啦！

測試一波

可以看到computed只會依賴state.a和state.b，而不會依賴state.c，這得益于我們前面幾篇文章實現的響應式系統(tǒng)，所以到了計算屬性這里，我們不用改動任何代碼，天然就支持。

不過還是有點小問題，我們讀取了兩次sum.value，sum卻被執(zhí)行了兩次，這和computed緩存的特性就不符了。

別急，馬上就要實現了這個最重要的特性了。

const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3
})
const?sum?=?computed(()?=>?{
??console.log('執(zhí)行計算')
??return?state.a?+?state.b
})
console.log(sum.value)
console.log(sum.value)

3. 緩存

回顧一下computed的緩存特性:

只有當其依賴的東西發(fā)生變化了才需要重新計算
否則就返回上一次執(zhí)行的結果。

為了緩存上一次計算的結果，咱們需要定義一個value變量，現在的關鍵是怎么才能知道其依賴的數據發(fā)生變化了呢？

function?computed?(getter)?{
??const?effectFn?=?effect(getter,?{
????lazy:?true,
??})
??let?value
??let?dirty?=?true
??const?obj?=?{
????get?value?()?{
??????//?2.?只有數據發(fā)生變化了才去重新計算
??????if?(dirty)?{
????????value?=?effectFn()
????????dirty?=?false
??????}
??????return?value
????}
??}
??return?obj
}

測試一波

const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3
})
const?sum?=?computed(()?=>?{
??console.log('執(zhí)行計算')
??return?state.a?+?state.b
})
console.log(sum.value)?//?3
console.log(sum.value)?//?3
state.a?=?4
console.log(sum.value)?//?3?答案是錯誤的

寄上任務調度

不得不說，任務調度實在太強大了，不僅僅可以實現數組的異步批量更新、在computed和watch中也是必不可少的。

function?computed?(getter)?{
??const?effectFn?=?effect(getter,?{
????lazy:?true,
????//?數據發(fā)生變化后，不執(zhí)行注冊的回調，而是執(zhí)行scheduler
????scheduler?()?{
??????//?數據發(fā)生了變化后，則重新設置為dirty，那么下次就會重新計算
??????dirty?=?true
????}
??})
??let?value
??let?dirty?=?true
??const?obj?=?{
????get?value?()?{
??????//?2.?只有數據發(fā)生變化了才去重新計算
??????if?(dirty)?{
????????value?=?effectFn()
????????dirty?=?false
??????}
??????return?value
????}
??}
??return?obj
}

測試一波

const?state?=?reactive({
??a:?1,
??b:?2,
??c:?3
})
const?sum?=?computed(()?=>?{
??console.log('執(zhí)行計算')
??return?state.a?+?state.b
})
console.log(sum.value)?//?3
console.log(sum.value)?//?3
state.a?=?4
console.log(sum.value)?//?3?答案是錯誤的

完美！??！這下面試官再也難不倒我了?。?！