vue3 watch 执行多次
时间: 2023-11-23 18:58:13 浏览: 1082
在Vue3中,watch默认会执行多次,这是因为watch默认会监听对象的每一个属性,当对象的某个属性发生变化时,watch就会执行一次。如果我们只想监听对象的整个变化,而不是对象的每一个属性,可以使用`deep`选项来解决这个问题。同时,如果在组件中使用watch监听路由中的值,由于使用了keep-alive,会导致watch执行多次,可以通过去掉keep-alive或在onDeactivated中销毁watch来解决这个问题。
下面是两种解决方法的示例代码:
1. 使用`deep`选项监听对象的整个变化
```javascript
const state = reactive({
obj: {
name: 'Tom',
age: 18
}
})
watch(state, (newVal, oldVal) => {
console.log('state changed')
}, { deep: true })
```
2. 在onDeactivated中销毁watch
```javascript
import { watch, onDeactivated } from 'vue'
export default {
setup() {
const destroyWatch = watch(
() => route.query.id,
val => {
console.log(val)
},
{ immediate: true }
)
onDeactivated(() => {
destroyWatch()
})
}
}
```
阅读全文