vue keep-alive 导致setup 执行两次
时间: 2023-08-11 17:26:44 浏览: 278
Vue 3 中的 `setup` 函数执行两次的原因可能是因为 `keep-alive` 组件在缓存和激活组件时都会重新创建组件实例,这导致了 `setup` 函数被调用了两次。
为了解决这个问题,您可以在 `setup` 函数中使用 `onActivated` 和 `onDeactivated` 钩子函数,这些钩子函数只在组件被激活和停用时执行一次,而不是每次重新创建组件实例时都执行。例如:
```vue
<template>
<keep-alive>
<component :is="currentComponent" />
</keep-alive>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
},
setup() {
const currentComponent = ref('ComponentA')
onActivated(() => {
console.log('Component activated')
})
onDeactivated(() => {
console.log('Component deactivated')
})
return {
currentComponent
}
}
}
</script>
```
在上面的代码中,我们使用了 `onActivated` 和 `onDeactivated` 钩子函数来处理组件被激活和停用的事件,并且将当前组件的名称存储在 `currentComponent` 变量中。这样就避免了 `setup` 函数被重复执行的问题。
阅读全文