watch

在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。

使用方式

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

传入一个ref

ref price:<input v-model="price">
ref product.price<input v-model="refProduct.price">

const price = ref(1)
// price改变，回调会执行
watch(price, (newVal, oldVal) => {
  console.log('newVal:', newVal, 'oldVal:', oldVal)
})

const refProduct = ref({
  number: 1,
  price: 10
})

// ref不加deep:true无法监听
watch(refProduct, (newVal, oldVal) => { 
  console.log('ref product newVal:', newVal, 'oldVal:', oldVal)
}, {
  immediate: true // 首次进来会执行
})

watch(refProduct, (newVal, oldVal) => {
  console.log('ref product deep-true newVal:', newVal, 'oldVal:', oldVal)
}, {
  deep: true,
  immediate: true
})

传入一个reactive

reactive product.price<input v-model="reactiveProduct.price">

const reactiveProduct = reactive({
  price: 100,
  number: 2
})

// reactive对象默认开启deep: true
watch(reactiveProduct, (newVal, oldVal) => {
  console.log('reactive product newVal:', newVal, 'oldVal:', oldVal)

})

传入getter函数

reactive product.price<input v-model="reactiveProduct.price">

watch(() => reactiveProduct.price * reactiveProduct.number, (newVal) => {
  console.log('传入getter函数，计算乘积：', newVal)
})

const refProduct = ref({
  number: 1,
  price: 10
})
// 如果想监听对象的某个属性
watch(() => refProduct.value.price, (newVal, oldVal) => {
  console.log('refProduct.value.price:', 'newVal:', newVal, 'oldVal:', oldVal)
})

$\color{red}{注意：一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调}$

const state = ref({
  obj: {
    foo: {
      bar: 1
    }
  }
})
watch(() => state.value.obj, (newVal) => {
  console.log('state.obj:', newVal)
})
setTimeout(() => {
  // state.value.obj = 4 // 可触发watch的回调
  state.value.obj.foo.bar = 3 // 无法触发watch的回调
}, 1000)

watch(() => state.value.obj, (newVal) => {
  console.log('deep-true state.obj:', newVal)
}, {
  deep: true // 添加了deep：true后，修改state.value.obj.foo.bar = 3可触发回调
})

多个数据源的数组

// 监听多个来源
const x = ref(0)
const y = ref(0)
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`) // x is 1 and y is 3
})
setTimeout(() => {
  x.value = 1
  y.value = 3
}, 1000)

watchEffect

watchEffect() 允许我们自动跟踪回调的响应式依赖

使用场景：

源与回调使用同一响应式状态
拥有多个依赖项或者使用一个响应式对象的多个属性

例如：

const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
const branches = ['main', 'v2-compat']

const currentBranch = ref(branches[0])
const commits = ref(null)

watchEffect(async () => {
  // 该 effect 会立即运行，
  // 并且在 currentBranch.value 改变时重新运行
  const url = `${API_URL}${currentBranch.value}`
  commits.value = await (await fetch(url)).json()
})

watch vs watchEffect

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

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外， $\color{red}{仅在数据源确实改变时才会触发回调}$ 。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中， $\color{red}{自动追踪所有能访问到的响应式属性}$ 。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。watchEffect回调会立即执行

回调的触发时机

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

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

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

watchEffect(callback, {
  flush: 'post'
})
// 后置刷新的watchEffect有个别名叫watchPostEffect

使用示例：

  <div ref="testWatchEffect">测试dom与回调触发时机 {{ watchEffectInnerText }}</div>

const testWatchEffect = ref<HTMLDivElement>()
const watchEffectInnerText = ref('初始值')

setTimeout(() => {
    watchEffectInnerText.value = 'change值'
}, 2000)

watch(watchEffectInnerText, () => {
  // watch flush-post： 测试dom与回调触发时机 change值
  console.log('watch flush-post：', testWatchEffect.value?.innerHTML)
}, {
  flush: 'post'
})
watch(watchEffectInnerText, () => {
  // watch ： 测试dom与回调触发时机 初始值
  console.log('watch ：', testWatchEffect.value?.innerHTML)
})
watchEffect(() => {

  // 1. watchEffect: 初始值  ；watchEffect 修改之后内部文案： 测试dom与回调触发时机 初始值
  // 2. watchEffect: change值 ；watchEffect 修改之后内部文案： 测试dom与回调触发时机 change值
  console.log('watchEffect:', watchEffectInnerText.value)
  console.log('watchEffect 修改之后内部文案：', testWatchEffect.value?.innerHTML)
}, {
  flush: 'post'
})

vue3 watch & watchEffect