vue3 watch

在 Vue 3 中，`watch` 函数是用于监听数据变化的。它可以监听响应式数据、计算属性以及其他依赖项的变化。

`watch` 函数有两种形式：基本用法和高级用法。

基本用法如下：

import { watch, reactive } from 'vue';

const state = reactive({
  count: 0,
});

watch(
  () => state.count, // 被监听的数据
  (newVal, oldVal) => {
    // 数据发生变化时执行的回调函数
    console.log(`count 值从 ${oldVal} 变为 ${newVal}`);
  }
);

高级用法中，可以使用 `watchEffect` 函数来监听多个响应式数据的变化：

import { watchEffect, reactive } from 'vue';

const state = reactive({
  count1: 0,
  count2: 0,
});

watchEffect(() => {
  console.log(`count1 的值为 ${state.count1}`);
  console.log(`count2 的值为 ${state.count2}`);
});

在上述示例中，无论 `count1` 或 `count2` 的值发生变化，都会触发回调函数。

除了基本用法和高级用法外，`watch` 还支持传递选项对象，以控制监听行为。例如，可以使用 `immediate` 选项来立即执行一次回调函数：

watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(`count 值从 ${oldVal} 变为 ${newVal}`);
  },
  { immediate: true }
);

以上是 Vue 3 中 `watch` 函数的基本用法和一些高级用法的示例。根据具体需求，可以使用不同的方式来监听数据的变化。