vue3中watch的使用方法

在Vue 3的开发中，watch是一个非常重要的响应式工具，它可以帮助我们监听数据的变化并执行相应的逻辑。下面将详细介绍watch在Vue 3中的使用方法。

基本用法

在Vue 3中，使用watch函数来创建一个数据监听器。watch函数接受三个参数：要监听的数据、回调函数和配置选项。例如：

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

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

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`);
});
</script>

在上述代码中，我们监听了count的变化，当count的值发生改变时，回调函数会被调用，并打印出旧值和新值。

监听多个数据源

watch函数还可以同时监听多个数据源，只需要将数据源以数组的形式传入即可。例如：

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

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

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

watch([count, message], ([newCount, newMessage], [oldCount, oldMessage]) => {
  console.log(`count从${oldCount}变为${newCount}，message从${oldMessage}变为${newMessage}`);
});
</script>

配置选项

watch函数的第三个参数是配置选项，常用的配置选项有immediate和deep。

• immediate：设置为true时，回调函数会在监听开始时立即执行一次。
• deep：当监听的数据是一个对象或数组时，设置deep为true可以深度监听对象或数组内部属性的变化。

例如：

<template>
  <div>{{ user.name }}</div>
</template>

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

const user = reactive({ name: 'John' });

watch(user, (newValue, oldValue) => {
  console.log('user发生了变化');
}, { deep: true });
</script>

通过合理使用watch的配置选项，我们可以更加灵活地监听数据的变化，从而实现复杂的业务逻辑。掌握Vue 3中watch的使用方法对于开发高效、灵活的Vue应用程序至关重要。