[[440389]]

本文轉載自微信公眾號「前端萬有引力」，作者 一川 。轉載本文請聯系前端萬有引力公眾號。

寫在前面

計算屬性是Vue開發中一個非常實用的API，它允許用戶自定義一個計算方法，然后根據一些依賴的響應式數據計算出新值并返回。當依賴發生變化時，計算屬性會自動重新計算獲取新值，使用方便。我們看出計算屬性本質上是對依賴的計算，為什么不直接使用函數呢?在Vue3中的計算屬性又是如何實現的呢?

計算屬性 computed

我們先簡單看個例子，我們看到再設置了計算屬性addOne后，直接改變addOne.value的值會報錯，只能通過改變原始值count.value才不會報錯。這是因為：

• 如果傳遞給computed的是一個函數，那就是一個getter函數，只能獲取它的值，而不能直接修改它
• 在getter函數中，根據響應式對象重新計算出新值，叫做計算屬性，這個響應式對象叫做計算屬性的依賴

const count = ref(1); 
const addOne = computed(()=>count.value+1); 
console.log(addOne.value);//2 
addOne.value++;//error 
count.value++; 
console.log(count.value);//3 

那么，我們應該如何修改addOne.value值呢?那就是在computed中設置set函數，進行自定義修改值。

const count = ref(1); 
const addOne = computed({ 
 get:()=>count.value+1, 
  set:val=>count.value=val-1 
}); 
addOne.value = 1; 
console.log(count.value);//0 

我們研究源碼：

export function computed<T>( 
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> 
) { 
  let getter: ComputedGetter<T> 
  let setter: ComputedSetter<T> 
 
  // 如果傳入是 function 說明是只讀 computed 
  if (isFunction(getterOrOptions)) { 
    getter = getterOrOptions 
    setter = __DEV__ 
      ? () => { 
          console.warn('Write operation failed: computed value is readonly') 
        } 
      : NOOP 
  } else { 
    // 不是方法說明是自定義的 getter setter  
    getter = getterOrOptions.get 
    setter = getterOrOptions.set 
  } 
 
  let dirty = true 
  let value: T 
  let computed: ComputedRef<T> 
 
  // 創建 effect, 我們在看 effect 源碼時知道了傳入 lazy 代表不會立即執行，computed 表明 computed 上游依賴改變的時候，會優先 trigger runner effect, scheduler 表示 effect trigger 的時候會調用 scheduler 而不是直接調用 effect 
  const runner = effect(getter, { 
    lazy: true, 
    // mark effect as computed so that it gets priority during trigger 
    computed: true, 
    scheduler: () => { 
      // 在觸發更新時把dirty置為true, 不會立即更新  
      if (!dirty) { 
        dirty = true 
        trigger(computed, TriggerOpTypes.SET, 'value') 
      } 
    } 
  }) 
 
  // 構造一個 computed 返回 
  computed = { 
    __v_isRef: true, 
    // expose effect so computed can be stopped 
    effect: runner, 
    get value() { 
      // dirty為ture, get操作時，執行effect獲取最新值 
      //  
      if (dirty) { 
        value = runner() 
        dirty = false 
      } 
      // dirty為false, 表示值未更新，直接返回  
      track(computed, TrackOpTypes.GET, 'value') 
      return value 
    }, 
    set value(newValue: T) { 
      setter(newValue) 
    } 
  } as any 
  return computed 
} 

computed計算屬性有兩個特點：

• 延時計算：只有當我們訪問計算屬性時，真正運行computed getter函數計算
• 緩存：它的內部會緩存上次的計算結果value，而只有dirty為true時才會重新計算，如果訪問計算屬性時dirty為false，那么直接返回這個value

那么，計算屬性的優勢是：只要依賴不變化，就可以使用緩存的value而不用每次再渲染組件的時候都執行函數去計算。

做個嵌套計算的小例子，我們看到：對于addOne而言，它收集的依賴是組件副作用渲染函數，而對于count而言，它收集的依賴是addTwo內部的runner函數。當我們修改count值，會進行派發通知，先運行addOne中的setter函數，此時addOne中的dirty值變成true，然后trigger函數再次派發通知;接著運行addTwo中的setter函數，此時把addTwo中的dirty值設置為true;當我們再次訪問addTwo中的值時，發現dirty值為true，就會執行addTwo的computed函數，會先去執行addOne.value + 1，再去執行addOne的computed函數中的count.value + 1。這樣就得到最后打印出來的值為2。

const count = ref(0); 
const addOne = computed(()=>{ 
 return count.value + 1;//1 
})  
 
const addTwo = computed(()=>{ 
 return addOne.value + 1;//2 
}) 
 
console.log(addTwo.value);//2 

得益于computed計算屬性的巧妙設計，無論嵌套多少層都能夠正常運行。

import {ref,computed} from "vue"; 
import {effect} from "@vue/reactivity"; 
 
const count = ref(0); 
const addOne = computed(()=>{ 
 return count.value + 1; 
}) 
 
effect(()=>console.log(addOne.value+count.value)) 
 
function add(){ 
 count.value++; 
} 
 
add(); 

我們看到上面代碼最終輸出結果是：1 3 3

當我們第一次執行addOne的computed計算屬性時，count.value值還是0，而addOne.value的值為1，將會觸發并執行effect，此時打印出來還是1。而后執行add()函數，會進行修改count.value的值，會觸發并執行effect函數，因為addOne也是effect的依賴，addOne的runners函數也是count.value的依賴，count.value值的修改會執行runners函數，會再次執行addOne的依賴，接著會觸發effect函數，因此會輸出兩次3。

computed函數返回的對象實際上劫持的是value屬性的getter和setter，但是為什么我們在組件的模板中訪問一個計算屬性變量，不用手動在后面加.value呢?

參考文章

• 《Vue3核心源碼解析》
• 《Vue中文社區》
• 《Vue3中文文檔》

寫在最后

理解計算屬性的工作機制，能夠搞明白計算屬性嵌套場景代碼的執行順序，知道計算屬性的兩個特點--延時計算和緩存，在組件的開發中合理使用計算屬性。