快捷導(dǎo)航

深入理解Vue3 computed

更新時(shí)間：2025年08月27日 09:21:05 作者：前端小巷子

本文主要介紹了Vue3 computed的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、使用方法

const state = reactive({ a: 1, b: 2 })
const sum = computed(() => state.a + state.b)

console.log(sum.value) // 3
state.a = 10
console.log(sum.value) // 12

看似普通，但注意兩點(diǎn)：

只讀：sum 不是函數(shù)，而是一個(gè)「帶緩存的 getter」。
懶執(zhí)行：直到第一次讀取 value，計(jì)算函數(shù)才真正跑一遍。

二、緩存機(jī)制：dirty 標(biāo)志位

源碼核心只有兩行狀態(tài)機(jī)：

let value: any
let dirty = true

dirty 為 true → 需要重新計(jì)算
dirty 為 false → 直接返回舊值

首次讀取 sum.value 時(shí)，dirty 從 true 變?yōu)?false，并把結(jié)果存入 value。

當(dāng)依賴(lài)的響應(yīng)式數(shù)據(jù)變化，調(diào)度器把 dirty 重新置為 true，但不會(huì)立即計(jì)算，而是等待下一次讀取。

這就是「緩存」的本質(zhì)：用 1 bit 的布爾值換一次昂貴的計(jì)算。

三、依賴(lài)收集：effect 包裹 getter

computed 的計(jì)算函數(shù)被 effect 包裝成副作用：

const effectFn = effect(getter, {
  lazy: true,
  scheduler() {
    dirty = true
    trigger(obj, TriggerOpTypes.SET, 'value')
  }
})

lazy: true 阻止首次執(zhí)行，實(shí)現(xiàn)惰性求值。
scheduler 在依賴(lài)變化時(shí)只打標(biāo)記，不立即重算，確保緩存語(yǔ)義。

當(dāng)模板讀取 sum.value，track 把當(dāng)前渲染副作用注冊(cè)到 computed 的依賴(lài)圖；當(dāng) state.a 變化，trigger 通知渲染器重新執(zhí)行，渲染器再去讀 sum.value，此時(shí)才真正觸發(fā)計(jì)算。

四、為什么拒絕異步？

設(shè)想一個(gè)異步 computed：

const asyncSum = computed(async () => {
  const res = await fetch('/api/sum?a=' + state.a)
  return res.json()
})

問(wèn)題立刻暴露：

緩存無(wú)法兌現(xiàn)

第一次讀取返回一個(gè) Promise，第二次讀取依賴(lài)并未變化，但緩存里存的是 Promise，無(wú)法直接返回結(jié)果。
渲染時(shí)數(shù)據(jù)缺位

模板在渲染階段需要同步值，異步導(dǎo)致視圖出現(xiàn)空檔或閃爍。
依賴(lài)追蹤混亂

異步完成時(shí)間不確定，期間若依賴(lài)再次變化，無(wú)法確定哪一次結(jié)果是最新。

Vue 官方給出的替代方案是 watch + ref：

const asyncSum = ref(0)
watch(state, async () => {
  asyncSum.value = await fetch('/api/sum?a=' + state.a).then(r => r.json())
})

watch 不緩存、不阻塞渲染，天然適合異步副作用。

五、可寫(xiě) computed：緩存 + setter 的雙通道

const fullName = computed({
  get()   { return firstName.value + ' ' + lastName.value },
  set(v)  { [firstName.value, lastName.value] = v.split(' ') }
})