Vue 3.0 响应性API Computed与watch

Vue 3.0 响应性API Computed与watch

#computed

使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

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

或者，它可以使用具有 get 和 set 函数的对象来创建可写的 ref 对象。

1. const count = ref(1)
2. const plusOne = computed({
3. get: () => count.value + 1,
4. set: val => {
5. count.value = val - 1
6. }
7. })
10. plusOne.value = 1
11. console.log(count.value) // 0

类型声明：

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

#watchEffect

在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

1. const count = ref(0)
4. watchEffect(() => console.log(count.value))
5. // -> logs 0
8. setTimeout(() => {
9. count.value++
10. // -> logs 1
11. }, 100)

类型声明：

1. function watchEffect(
2. effect: (onInvalidate: InvalidateCbRegistrator) => void,
3. options?: WatchEffectOptions
4. ): StopHandle
7. interface WatchEffectOptions {
8. flush?: 'pre' | 'post' | 'sync' // default: 'pre'
9. onTrack?: (event: DebuggerEvent) => void
10. onTrigger?: (event: DebuggerEvent) => void
11. }
14. interface DebuggerEvent {
15. effect: ReactiveEffect
16. target: any
17. type: OperationTypes
18. key: string | symbol | undefined
19. }
22. type InvalidateCbRegistrator = (invalidate: () => void) => void
25. type StopHandle = () => void

参考：watchEffect 指南

#watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的 data 源，并在单独的回调函数中副作用。默认情况下，它也是惰性的——即，回调是仅在侦听源发生更改时调用。

• 与 watchEffect 比较，watch 允许我们：
  • 惰性地执行副作用；
  • 更具体地说明应触发侦听器重新运行的状态；
  • 访问侦听状态的先前值和当前值。

#侦听一个单一源

侦听器 data 源可以是返回值的 getter 函数，也可以是 ref：

1. // 侦听一个getter
2. const state = reactive({ count: 0 })
3. watch(
4. () => state.count,
5. (count, prevCount) => {
6. /* ... */
7. }
8. )
11. // 直接侦听一个ref
12. const count = ref(0)
13. watch(count, (count, prevCount) => {
14. /* ... */
15. })

#侦听多个源

侦听器还可以使用数组同时侦听多个源：

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

#与 watchEffect 共享行为

watch 与 watchEffect 在手动停止，副作用无效 (将 onInvalidate 作为第三个参数传递给回调)，flush timing 和 debugging 有共享行为。

类型声明：

1. // 侦听单一源
2. function watch<T>(
3. source: WatcherSource<T>,
4. callback: (
5. value: T,
6. oldValue: T,
7. onInvalidate: InvalidateCbRegistrator
8. ) => void,
9. options?: WatchOptions
10. ): StopHandle
13. // 侦听多个源
14. function watch<T extends WatcherSource<unknown>[]>(
15. sources: T
16. callback: (
17. values: MapSources<T>,
18. oldValues: MapSources<T>,
19. onInvalidate: InvalidateCbRegistrator
20. ) => void,
21. options? : WatchOptions
22. ): StopHandle
25. type WatcherSource<T> = Ref<T> | (() => T)
28. type MapSources<T> = {
29. [K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
30. }
33. // 参见 `watchEffect` 类型声明共享选项
34. interface WatchOptions extends WatchEffectOptions {
35. immediate?: boolean // default: false
36. deep?: boolean
37. }