watcheffect深度监听
时间: 2023-11-26 08:43:38 浏览: 51
watchEffect 是 Vue 3 中新增的一个响应式API,用于深度监听数据变化,当监听的数据发生变化时,自动执行传入的回调函数。
watchEffect 可以监听哪些数据类型:
- Ref 对象
- Reactive 对象
- 嵌套对象和数组
示例代码如下:
```
import { reactive, ref, watchEffect } from 'vue'
const state = reactive({
count: 0,
message: 'Hello world',
list: [
{
id: 1,
name: 'apple'
},
{
id: 2,
name: 'banana'
}
]
})
const count = ref(0)
watchEffect(() => {
console.log(state.count) // 监听 state.count 的变化
console.log(state.message) // 监听 state.message 的变化
console.log(state.list[0].name) // 监听 state.list[0].name 的变化
console.log(count.value) // 监听 count 的变化
})
```
相关问题
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>
```
watch和watchEffect区别
watch和watchEffect都是Vue 3中提供的用于响应式侦听数据变化的API,它们的区别在于:
1. watch可以监听到任何数据的变化,包括响应式数据、计算属性、甚至是非响应式数据,而watchEffect只能监听到响应式数据的变化。
2. watch需要显式地传入需要监听的数据,而watchEffect会自动追踪函数中使用的响应式数据,并在这些数据变化时触发函数。
简单来说,watch适用于对指定数据进行深度监听,而watchEffect则适用于对某个函数中使用的响应式数据进行监听,且不需要知道具体监听哪些数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)