vue3深度监听watch用法
时间: 2023-06-30 11:25:08 浏览: 248
在 Vue 3 中,可以使用 `watch` 函数来进行响应式数据的深度监听。 `watch` 函数接收两个参数:要监听的响应式数据和回调函数。当响应式数据发生变化时,回调函数将被调用。
下面是一个示例代码:
```javascript
import { watch } from 'vue';
export default {
setup() {
const obj = {
name: 'Tom',
age: 18,
address: {
city: 'Beijing',
district: 'Haidian'
}
};
watch(() => obj, (newVal, oldVal) => {
console.log('obj 发生了变化');
}, { deep: true });
return {
obj
};
}
}
```
在上面的示例中,我们通过 `watch` 函数监听了 `obj` 对象的变化。由于 `obj` 是一个对象,我们需要加上 `deep: true` 选项才能实现深度监听。
当 `obj` 对象的任何属性发生变化时,回调函数都会被调用。如果只想监听 `obj` 对象的某个属性,可以将其作为第一个参数传递给 `watch` 函数,例如:
```javascript
watch(() => obj.address, (newVal, oldVal) => {
console.log('obj.address 发生了变化');
}, { deep: true });
```
这样,只有当 `obj.address` 发生变化时,回调函数才会被调用。