极客教程Vue.js 中的 Watch 在 Vue 3 Setup 中的应用
在本文中，我们将介绍 Vue.js 中 Watch 的使用方法，并重点讨论其在 Vue 3 的新特性 Setup 中的应用。Watch 作为 Vue.js 的一个重要特性，可以用来观察 Vue 实例中的数据变化，并在数据发生变化时执行相应的操作。
阅读更多：Vue.js 教程
Watch 介绍
Watch 是 Vue.js 中一个非常有用的特性，它可以监视 Vue 实例中的数据成员的变化，并在数据变化时执行预定义的回调函数。Watch 可以用来监听单个数据成员的变化，也可以监听多个数据成员或计算属性的变化。
在 Vue 3 中，Watch 依然是非常重要的特性，但在 Setup 阶段的使用方式有了一些变化。在 Vue 3 的 Composition API 中，我们可以通过传递一个回调函数给 watch 函数来创建一个 Watcher。这个回调函数会在 Watcher 监测到的任意响应式数据发生变化时被调用。
下面是一个使用 Watch 的示例代码：
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`count 的值从 {oldVal} 变为{newVal}`);
});
return { count };
}
}
在这个示例中，我们创建了一个响应式的 count 变量，并使用 watch 函数来监听 count 的变化。当 count 发生变化时，我们传递的回调函数将被执行，并打印出新旧值。通过这种方式，我们可以轻松地监测数据的变化并执行相应的操作。
Watch 的高级使用
除了简单地监听数据的变化，Watch 还支持一些高级用法，例如监听数组或对象的变化、在监听开始和结束时执行操作、监听表达式等。
监听数组或对象的变化
在 Vue 3 中，Watch 可以直接监听数组或对象的变化，而不需要额外设置 deep 或 immediate 这些参数。例如，我们可以这样监听一个数组的变化：
const list = ref([1, 2, 3]);
watch(list, (newVal, oldVal) => {
console.log('list 发生变化');
});
当数组的内容发生变化时，回调函数将被执行，并打印出 “list 发生变化”。
在监听开始和结束时执行操作
在某些情况下，我们可能需要在 Watcher 开始和结束时执行一些操作。在 Vue 3 的 Watch 中，我们可以使用 onTrack 和 onTrigger 这两个钩子函数来实现。onTrack 函数会在 Watcher 开始追踪依赖时被调用，而 onTrigger 函数会在 Watcher 被触发时被调用。
下面是一个使用 onTrack 和 onTrigger 的示例：
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`count 的值从 {oldVal} 变为{newVal}`);
}, {
onTrack: () => {
console.log('Watcher 开始追踪依赖');
},
onTrigger: () => {
console.log('Watcher 被触发');
}
});
在这个示例中，当 Watcher 开始追踪依赖时，onTrack 的回调函数会被执行，打印出 “Watcher 开始追踪依赖”。当 Watcher 被触发时，onTrigger 的回调函数会被执行，打印出 “Watcher 被触发”。
监听表达式
在 Vue 3 的 Watch 中，我们可以使用字符串表达式来监听多个数据成员或计算属性的变化。通过字符串表达式，我们可以更灵活地定义需要监听的数据。
下面是一个使用字符串表达式的示例：
const obj = reactive({
x: 1,
y: 2,
});
watch('obj.x + obj.y', (newVal, oldVal) => {
console.log(`obj.x + obj.y 的值从 {oldVal} 变为{newVal}`);
});
在这个示例中，我们使用字符串表达式 "obj.x + obj.y" 来监听 obj.x 和 obj.y 的变化。当这两个变量发生变化时，对应的回调函数将被执行，并打印出新旧值。
总结
本文介绍了 Vue.js 中 Watch 的使用方法，并重点探讨了其在 Vue 3 的新特性 Setup 中的应用。Watch 是一个非常重要的特性，可以用来监测数据的变化并执行相应的操作。在 Vue 3 中，我们可以使用 watch 函数来创建 Watcher，并通过传递一个回调函数来定义 Watcher 的行为。除了基本的数据监听外，Vue 3 的 Watch 还支持监听数组或对象的变化、在监听开始和结束时执行操作、监听表达式等高级用法。通过灵活地使用 Watch，我们可以更好地管理和响应 Vue 实例中的数据变化。