vue3的侦听器watch函数

watch() 函数
watch 函数接受两个必需参数和一个可选参数：

1、 要观察的响应式数据

• 它可以是一个 ref (包括计算属性)
• 一个响应式对象
• 一个 getter 函数
• 或多个数据源组成的数组

2、 回调函数

• newValue：响应式数据的新值。
• oldValue：响应式数据的旧值。

3、可选配置对象

• immediate：是否在创建时立即调用回调函数。默认为 false。
• deep：是否深度监听对象内部值的变化。默认为 false。
• flush：确定回调的刷新时机，值可以是 pre（默认）、post 或 sync。
• once: 是否希望回调只在源变化时触发一次，默认false（3.4+版本）

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, watch } from 'vue';

//监听一个
const count = ref(0);
watch(count, (newCount, oldCount) => {
  console.log(`count changed from ${oldCount} to ${newCount}`);
}, { immediate: true });
//watch 默认是懒执行的：仅当数据源变化时，才会执行回调。
//但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。
//举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
//我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行：

//监听多个
const a= ref(0);
const b= ref(0);
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  if (newA!== oldA) {
     console.log(`a changed from ${oldA} to ${newA}`);
  }
  if (newB!== oldB) {
     console.log(`b changed from ${oldB} to ${newB}`);
  }
});

//或者灵活监听多个
const watchAB = { a, b};
watch(watchAB , (newValues, oldValues) => {
    for (const key in newValues) {
      if (newValues[key] !== oldValues[key]) {}
    }
});
</script>

注意，你不能直接侦听响应式对象的属性值，例如:

const obj = reactive({ count: 0 })
obj.count++

// 错误，因为 watch() 得到的参数是一个固定值：0，非响应式
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})
//正确写法
watch(() => obj.count, (newCount) => {
  console.log(`Count is: ${newCount}`);
});

watch(obj, (newValue, oldValue) => {
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
  // 而且count变化时不会触发，只有obj对象引用变化时才触发
  // 需要启动{deep:true}才会监听深层属性
})

watchEffect()函数
watchEffect 会自动追踪其内部使用的所有响应式数据。当这些数据发生变化时，回调函数会重新执行。例如下面示例中，watchEffect 会监听 count 和 message 这两个响应式数据，并在它们变化时打印新的值。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);
const message = ref('Hello');

count.value++;
message.value = 'Hi';

watchEffect(() => {
  console.log(`Count is now: ${count.value}`);
  console.log(`Message is now: ${message.value}`);
});
</script>