vue3深度监听怎么写
时间: 2023-07-18 15:15:54 浏览: 57
在 Vue3 中,深度监听可以使用 `watch` 函数的 `deep` 选项来实现。具体写法如下:
```javascript
import { defineComponent, watch } from 'vue';
export default defineComponent({
data() {
return {
obj: {
name: 'Tom',
age: 20,
},
};
},
mounted() {
watch(
() => this.obj,
(newVal, oldVal) => {
console.log('obj changed:', newVal, oldVal);
},
{ deep: true }
);
},
});
```
在上面的例子中,我们使用 `watch` 函数来监听 `obj` 对象的变化。由于 `obj` 对象是一个嵌套的对象,所以我们需要使用 `deep` 选项来进行深度监听,否则只会监听到 `obj` 对象的引用变化,而不会监听到其属性的变化。
需要注意的是,深度监听会对性能造成一定的影响,因此建议在必要时才使用。如果你只需要监听对象的某个属性,则可以使用 `watch` 函数的第一个参数来指定属性的路径,而不是监听整个对象。
相关问题
vue3深度监听
在 Vue3 中,可以使用 `watch` 和 `watchEffect` 两种方式进行深度监听。
1. `watch`:可以手动指定监听对象,当指定的对象发生变化时,执行回调函数。若监听对象是一个对象,则需要设置 `deep: true` 才能进行深度监听。
```html
<template>
<div>{{ obj }}</div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
setup() {
const obj = reactive({ a: 1, b: 2 });
watch(
() => obj,
(newObj, oldObj) => {
console.log('obj changed', newObj, oldObj);
},
{ deep: true }
);
return { obj };
},
};
</script>
```
2. `watchEffect`:自动追踪数据依赖,并在其变化时执行回调函数。同样,若监听对象是一个对象,则需要设置 `deep: true` 才能进行深度监听。
```html
<template>
<div>{{ obj }}</div>
</template>
<script>
import { reactive, watchEffect } from 'vue';
export default {
setup() {
const obj = reactive({ a: 1, b: 2 });
watchEffect(() => {
console.log('obj changed', obj);
}, { deep: true });
return { obj };
},
};
</script>
```
vue3深度监听watch用法
在 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` 发生变化时,回调函数才会被调用。