vue3侦听器

在 Vue 3 中，侦听器（watchers）是一种用于观察和响应 Vue 实例上数据变化的机制。与计算属性（computed properties）不同，侦听器允许你执行异步操作或更复杂的副作用处理。

在 Vue 3 中，你可以使用 watch 函数来创建侦听器。watch 函数可以在组件的 setup 函数中使用，也可以在组合式 API 的其他部分使用。以下是一些关于如何在 Vue 3 中使用侦听器的基本示例和说明：

基本用法

<template>
  <div>
    <p>Number: {{ number }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const number = ref(0);

    const increment = () => {
      number.value++;
    };

    // 侦听 number 的变化
    watch(number, (newVal, oldVal) => {
      console.log(`Number changed from ${oldVal} to ${newVal}`);
    });

    return {
      number,
      increment,
    };
  },
};
</script>

在这个例子中，watch 函数用于侦听 number 的变化，并在变化时执行回调函数。

侦听多个源

你可以使用一个数组来同时侦听多个响应式引用或计算属性：

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

export default {
  setup() {
    const foo = ref('');
    const bar = ref('');

    watch([foo, bar], ([newFoo, newBar], [oldFoo, oldBar]) => {
      console.log(`Foo changed from ${oldFoo} to ${newFoo}`);
      console.log(`Bar changed from ${oldBar} to ${newBar}`);
    });

    return {
      foo,
      bar,
    };
  },
};
</script>

深度侦听

默认情况下，watch 只能侦听引用类型（对象或数组）的顶层属性的变化。如果你需要侦听嵌套属性的变化，可以使用 deep 选项：

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

export default {
  setup() {
    const user = reactive({
      name: 'John',
      address: {
        city: 'New York',
      },
    });

    watch(user, (newVal, oldVal) => {
      console.log('User changed:', newVal, oldVal);
    }, { deep: true });

    // 修改嵌套属性
    setTimeout(() => {
      user.address.city = 'Los Angeles';
    }, 2000);

    return {
      user,
    };
  },
};
</script>

立即执行

默认情况下，侦听器在第一次绑定时不会立即执行其回调函数。如果你希望在绑定时立即执行一次，可以使用 immediate 选项：

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

export default {
  setup() {
    const count = ref(0);

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    }, { immediate: true });

    return {
      count,
    };
  },
};
</script>

停止侦听

watch 函数返回一个停止侦听的函数。你可以调用这个函数来停止侦听某个响应式源：

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

export default {
  setup() {
    const count = ref(0);
    let stopWatch;

    stopWatch = watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    // 在组件卸载时停止侦听
    onUnmounted(() => {
      stopWatch();
    });

    return {
      count,
    };
  },
};
</script>

这些示例展示了 Vue 3 中 watch 函数的一些基本用法和选项。通过这些功能，你可以灵活地侦听和响应 Vue 实例上的数据变化。