Vue 3.0 響應(yīng)性API Computed與watch

本節(jié)例子中代碼使用的單文件組件語(yǔ)法

#computed

使用 getter 函數(shù)，并為從 getter 返回的值返回一個(gè)不變的響應(yīng)式 ref 對(duì)象。

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

或者，它可以使用具有 get 和 set 函數(shù)的對(duì)象來(lái)創(chuàng)建可寫(xiě)的 ref 對(duì)象。

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

類(lèi)型聲明：

// read-only
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>
// writable
function computed<T>(options: { get: () => T; set: (value: T) => void }): Ref<T>

#watchEffect

在響應(yīng)式地跟蹤其依賴(lài)項(xiàng)時(shí)立即運(yùn)行一個(gè)函數(shù)，并在更改依賴(lài)項(xiàng)時(shí)重新運(yùn)行它。

const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

類(lèi)型聲明：

function watchEffect(
  effect: (onInvalidate: InvalidateCbRegistrator) => void,
  options?: WatchEffectOptions
): StopHandle
interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync'  // default: 'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}
interface DebuggerEvent {
  effect: ReactiveEffect
  target: any
  type: OperationTypes
  key: string | symbol | undefined
}
type InvalidateCbRegistrator = (invalidate: () => void) => void
type StopHandle = () => void

參考：watchEffect 指南

#watch

watch API 與選項(xiàng)式 API this.$watch (以及相應(yīng)的 watch 選項(xiàng)) 完全等效。watch 需要偵聽(tīng)特定的 data 源，并在單獨(dú)的回調(diào)函數(shù)中副作用。默認(rèn)情況下，它也是惰性的——即，回調(diào)是僅在偵聽(tīng)源發(fā)生更改時(shí)調(diào)用。

• 與 watchEffect 比較，watch 允許我們：
  • 惰性地執(zhí)行副作用；
  • 更具體地說(shuō)明應(yīng)觸發(fā)偵聽(tīng)器重新運(yùn)行的狀態(tài)；
  • 訪問(wèn)偵聽(tīng)狀態(tài)的先前值和當(dāng)前值。

#偵聽(tīng)一個(gè)單一源

偵聽(tīng)器 data 源可以是返回值的 getter 函數(shù)，也可以是 ref：

// 偵聽(tīng)一個(gè)getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
// 直接偵聽(tīng)一個(gè)ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

#偵聽(tīng)多個(gè)源

偵聽(tīng)器還可以使用數(shù)組同時(shí)偵聽(tīng)多個(gè)源：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

#與 watchEffect 共享行為

watch 與 watchEffect 在手動(dòng)停止，副作用無(wú)效 (將 onInvalidate 作為第三個(gè)參數(shù)傳遞給回調(diào))，flush timing 和 debugging 有共享行為。

類(lèi)型聲明：

// 偵聽(tīng)單一源
function watch<T>(
  source: WatcherSource<T>,
  callback: (
    value: T,
    oldValue: T,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options?: WatchOptions
): StopHandle
// 偵聽(tīng)多個(gè)源
function watch<T extends WatcherSource<unknown>[]>(
  sources: T
  callback: (
    values: MapSources<T>,
    oldValues: MapSources<T>,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options? : WatchOptions
): StopHandle
type WatcherSource<T> = Ref<T> | (() => T)
type MapSources<T> = {
  [K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
}
// 參見(jiàn) `watchEffect` 類(lèi)型聲明共享選項(xiàng)
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // default: false
  deep?: boolean
}

參考：watch 指南