Watch

计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些操作，比如更改DOM，或者根据异步操作的结果去修改另一处状态。可以使用watch在状态变化时触发回调函数。

const x = ref(0)
const y = ref(0)

//单个ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

//getter函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

//多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

注意⚠️：不能直接监听响应式对象的属性值：

const obj = reactive({count: 0})

//错误，因为watch()得到的参数是一个Number
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

这种情况下，应该使用一个返回该值的getter函数：

watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

深层监听器

直接给watch()传入一个响应式对象，会隐式地创建一个深层监听器，该对象所有的变更都会触发回调函数：

const obj = reactive({count: 0})

watch(obj, (newVal, oldVal) => {
  // 在嵌套的属性变更时触发
  // 注意 newVal 和 oldVal 是相等的
  // 因为它们是同一个对象！
})

相比之下，一个返回响应式对象的getter函数，只有在返回不同的对象时，才会触发回调：

watch(
  () => state.someObject,
  () => {
    // 仅当 state.someObject 被替换时触发
  }
)

可以通过给上面这个例子显式地加上deep选项，强制转为深层监听器：

watch(
  () => state.someObject,
  (newVal, oldVal) => {
    // 这里newVal和oldVal是相等的，除非state.someObject被整个替换了
  },
  { deep: true}
)

ps: deep选项还可以是一个数字，表示最大遍历深度，即Vue应该遍历对象嵌套属性的级数。谨慎使用deep属性，当用于大型数据结构时，开销很大，因此只在必要时才使用它。

即时回调的监听器

watch默认是懒执行的，仅当数据源变化时，才会执行回调。在某些情况下，希望在创建监听器后立即执行一遍回调函数。可以通过传入immediate: true选项来强制监听器回调立即执行：

watch(
  source,
  (newVal, oldVal) => {
    //立即执行，且当`source`改变时再次执行
  },
  { immedidate: true }
)

一次性监听器

每当被监听源发生变化时，监听器的回调函数就会执行。如果希望回调函数只在源变化时触发一次，可以使用once: true选项。

watch(
  source,
  (newVal, oldVal) => {
    //当 source 变化时，仅触发一次
  },
  { once: true }
)

WatchEffect

监听器的回调函数中使用监听源是很常见的一件事。如下面的例子：

const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )

    data.value = await response.json()
  },
  { immediate: true }
)

可以看到todoId在监听源和回调函数中都被用到了，可以使用watchEffect来简化上面的代码，watchEffect可以自动跟踪回调的响应式依赖。

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )

  data.value = await response.json()
})

这个代码里面回调会立即执行，不需要指定immediate: true。在执行期间，它会自动追踪todoId.value作为依赖（和计算属性类似）。每当todoId.value变化时，回调会再次执行。有了watchEffect()就不需要明确传递todoId作为源值。

上面的例子中只有一个依赖项，watchEffect()的好处相对较小。但对于有多个依赖项的监听器来说，使用watchEffect()可以消除手动维护依赖列表的负担。此外，如果需要监听一个嵌套数据结构中的几个属性，watchEffect可能会比深度监听器更有效，因为它只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。

watchEffect仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个await正常工作前访问到的属性才会被追踪。

watch和watchEffect的区别

watch和watchEffect都能响应式地执行有副作用的回调。它们之间的主要区别时追踪响应式依赖的方式：

  • watch只追踪明确监听的数据源。它不会追踪任何在回调中访问到的东西。另外仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此可以更加精确地控制回调函数的触发时机。
  • watchEffect则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。

副作用清理

当在监听器中执行副作用，比如异步请求：

watch(id, (newId) => {
  fetch(`/api/${newId}`).then(() => {
    //回调逻辑
  })
})

如果在请求完成之前id发生了变化，那么当请求结束后，回调函数会使用一个已经过时的Id值触发回调，正常情况下，我们更加希望能够在Id变为新值时取消过时的请求。

可以使用onWatcherCleanup()API来注册一个清理函数，当监听器失效并准备重新运行时会被调用：

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, {signal: controller.signal}).then(() => {
    //回调函数
  })

  onWatcherCleanup(() => {
    //终止过期请求
    controller.abort()
  })
})

onWatcherCleanup仅在Vue3.5+中支持，并且必须在watchEffect效果函数或watch回调函数的同步执行期间调用：不能在异步函数的await语句之后调用它。

作为替代，watch回调函数的第三个参数onCleanup，以及watchEffect作用函数的第一个参数：

watch(id, (newId, oldId, onCleanup) => {
  //...
  onCleanup(() => {
    //清理逻辑
  })
})

watchEffect((onCleanup) => {
  //..
  onCleanup(() => {
    //清理逻辑
  })
})

这在Vue3.5之前的版本有效，此外通过函数参数传递的onCleanup与监听器实例相绑定，因此不受onWatcherCleanup的同步限制。

回调的触发时机

当更改了响应式状态，可能会同时触发Vue组件更新和监听器回调。

类似于组件更新，创建的监听器回调函数也会被批量处理以避免重复调用。默认情况下，监听器回调会在父组件更新之后，所属组件的DOM更新之前被调用。这意味着如果尝试在监听器回调中访问所属组件的DOM，那么DOM将处于更新前的状态。

Post Watchers

如果想在监听器回调中访问Vue更新之后的所属组件的DOM，需要指明flush: 'post'选项：

watch(source, callback, {flush: 'post'})

watchEffect(source, callback, {flush: 'post'})

后置刷新的watchEffect有个更加方便的别名函数watchPostEffect()：

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在Vue更新后执行 */
})

同步监听器

可以创建一个同步触发的监听器，它会在Vue进行任何更新之前触发：

watch(source, callback, {
  flush: 'sync'
})

watchEffect(callback, {
  flush: 'sync'
})

同步触发的watchEffect()有个更方便的别名函数watchSyncEffect()：

import { watchSyncEffect } from 'vue'

watchSyncEffect(() => {
  /* 在响应式数据变化时同步执行 */
})

警告： 同步监听器不会进行批处理，每当检测到响应式数据发生变化时就会触发。可以使用它来监视简单的布尔值，但应该避免在可能多次同步修改的数据源（如数组）上使用。

停止监听器

在组件中使用同步语句创建的监听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，无需关心怎么停止一个监听器。

一个关键点时，监听器必须用同步语句创建，如果用异步回调创建一个监听器，那么它不会绑定到当前组件上，必须手动停止它，以防内存泄露。

<script setup>
import { watchEffect } from 'vue'

//它会自动停止
watchEffect(() => {})

//这个不会
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

要手动停止一个监听器，需要调用watch或者watchEffect返回的函数：

const unwatch = watchEffect(() => {})

//当监听器不再需要时
unwatch()

需要异步创建监听器的情况很少，尽可能同步创建。如果需要等待一些异步数据，可以使用条件式的监听逻辑：

// 需要异步请求得到的数据
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // 数据加载后执行某些操作...
  }
})