在 Vue 3 的 <script setup> 语法糖中，watch 方法用于响应式地追踪一个或多个数据源，并在数据源发生变化时执行回调函数。下面为你详细介绍 watch 方法的不同应用场景。
1. 监听单个响应式数据
当你需要监听一个响应式数据（如 ref 或 reactive 创建的数据）的变化时，可以使用 watch 方法。
<template><div><input v-model="count" type="number" /><p>当前计数: {{ count }}</p></div>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);// 监听 count 的变化
watch(count, (newValue, oldValue) => {console.log(`计数从 ${oldValue} 变为 ${newValue}`);
});
</script>代码解释
count 是一个由 ref 创建的响应式数据。
watch 方法接收两个参数：第一个参数是要监听的数据源，这里是 count；第二个参数是回调函数，当 count 的值发生变化时，该回调函数会被调用，并且会传入新值和旧值。
2. 监听多个响应式数据
watch 方法也可以同时监听多个响应式数据。
<template><div><input v-model="firstName" type="text" /><input v-model="lastName" type="text" /><p>全名: {{ fullName }}</p></div>
</template><script setup>
import { ref, watch, computed } from 'vue';const firstName = ref('');
const lastName = ref('');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);// 监听 firstName 和 lastName 的变化
watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {console.log(`名字从 ${oldFirstName} ${oldLastName} 变为 ${newFirstName} ${newLastName}`);
});
</script>代码解释
watch 方法的第一个参数可以是一个数组，用于同时监听多个数据源。
回调函数的第一个参数是新值数组，第二个参数是旧值数组，它们的顺序与监听的数据源顺序一致。
3. 监听对象属性
如果你需要监听一个对象的某个属性的变化，可以使用一个 getter 函数作为 watch 的第一个参数
<template><div><input v-model="user.name" type="text" /><p>用户名: {{ user.name }}</p></div>
</template><script setup>
import { reactive, watch } from 'vue';const user = reactive({name: 'John',age: 30
});// 监听 user.name 的变化
watch(() => user.name, (newName, oldName) => {console.log(`用户名从 ${oldName} 变为 ${newName}`);
});
</script>代码解释
watch 方法的第一个参数是一个 getter 函数，该函数返回要监听的属性值。
当 user.name 的值发生变化时，回调函数会被调用。
4. 深度监听
如果你需要监听一个对象的所有属性的变化，可以使用 deep 选项
<template><div><input v-model="user.name" type="text" /><input v-model="user.age" type="number" /><p>用户名: {{ user.name }}, 年龄: {{ user.age }}</p></div>
</template><script setup>
import { reactive, watch } from 'vue';const user = reactive({name: 'John',age: 30
});// 深度监听 user 对象的所有属性的变化
watch(() => user,(newUser, oldUser) => {console.log('用户信息发生了变化');},{ deep: true }
);
</script>代码解释
watch 方法的第三个参数是一个选项对象，通过设置 deep: true 可以开启深度监听。
当 user 对象的任何属性发生变化时，回调函数都会被调用。
5. 立即执行回调
如果你希望在 watch 初始化时立即执行一次回调函数，可以使用 immediate 选项。
<template><div><input v-model="count" type="number" /><p>当前计数: {{ count }}</p></div>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);// 立即执行回调函数
watch(count,(newValue, oldValue) => {console.log(`计数从 ${oldValue} 变为 ${newValue}`);},{ immediate: true }
);
</script>代码解释
通过设置 immediate: true，回调函数会在 watch 初始化时立即执行一次，此时 oldValue 为 undefined。
以上就是 watch 方法在 Vue 3 <script setup> 中的常见应用场景。
