vue3中watch的deep
时间: 2023-10-27 11:06:55 浏览: 40
在Vue3中,watch的deep选项用于深度监听一个复杂的对象。与Vue2一样,可以使用deep:true来开启深度监听。当开启深度监听后,如果对象内部的属性发生变化,watch会自动监听到并执行相应的操作。需要注意的是,Vue3中的watch默认不开启深度监听,需要手动设置deep:true来开启。
相关问题
vue3 watch deep
在Vue3中,可以使用watch函数来监听响应式数据的变化,并且可以使用deep选项来进行深度监听。具体实现方法如下:
```javascript
import { watch } from 'vue'
watch(
() => state.obj,
(newVal, oldVal) => {
console.log('obj changed')
},
{
deep: true
}
)
```
在上述代码中,我们使用watch函数来监听state对象中的obj属性的变化,并且设置了deep选项为true,表示进行深度监听。当obj属性的任何一个子属性发生变化时,都会触发回调函数。
vue3watch deep
在Vue3中,通过watch监听的ref对象默认是浅层监听的,直接修改嵌套的对象属性不会返回要监听的具体属性。例如,在上述代码中,我们可以使用watch监听state.value.age属性的变化,并在回调函数中打印出相应的信息。如果我们想要监听嵌套在state.value中的name属性的变化,: true}选项。例如,我们可以使用watch监听state.value.name属性的变化,并在回调函数中打印出相应的信息,代码如下:
watch(() => state.value.name, () => {
console.log('name变化了')
}, { deep: true })