在 Vue 中,`watch` 是一个重要的选项,用于观察和响应 Vue 实例上的数据变化。当你需要在数据变化时执行一些异步操作或复杂操作时,`watch` 是一个非常有用的工具。
基本用法:
```javascript
export default {
data() {
return {
message: 'Hello Vue!'
};
},
watch: {
// 监听 message 的变化
message(newVal, oldVal) {
console.log('新值:' + newVal + ',旧值:' + oldVal);
// 在这里执行其他操作,如异步请求等
}
}
}
```
在上面的例子中,当 `message` 数据项发生变化时,`watch` 中的回调函数会被触发,并接收两个参数:新值和旧值。你可以在这个函数里面执行任何你需要的操作。
`watch` 的高级用法还包括:
1. **深度监听(deep watch)**:如果你需要监听一个对象的内部变化,可以使用深度监听。例如 `watch: { obj: { deep: true } }`。
2. **立即执行**:默认情况下,当你初始化一个 Vue 实例时,`watch` 里的函数不会被立即执行。如果你想在初始化时就执行一次,可以使用 `immediate` 选项。例如 `watch: { message: { immediate: true } }`。
3. **使用数组语法**:你可以在一个数组中列出多个要监听的数据项。例如 `watch: ['message', 'anotherData']`。
4. **使用函数返回监听对象**:在某些情况下,你可能需要根据组件的状态动态地决定要监听哪些数据。这时可以使用函数返回监听对象的方式。例如 `watch: { getWatchedData() { /* 返回监听对象 */ } }`。
注意:尽量避免在 `watch` 里进行复杂的逻辑操作或多次递归调用,因为这可能会导致性能问题。在需要执行复杂操作时,考虑使用计算属性(computed)或方法(methods)。