Vue 组件被销毁两次

Posted 2023-02-23

【中文标题】Vue 组件被销毁两次

【英文标题】：Vue component being destroyed twice

【发布时间】：2019-12-04 07:06:05

【问题描述】：

注销后，我的组件的销毁生命周期挂钩被调用。从刚刚注销的同一浏览器会话登录将导致同一组件在创建/安装新实例之前再次被销毁。这导致我在该组件上使用的库出现问题。

例如：

首次登录：

Component Created ID1
Component Mounted ID1 Then logout:
Component Before Destroy ID1
Component Destroyed ID1 So everything so far is correct. Now log back in as a different user:
Component Created ID1
Component Mounted ID1
Component Before Destroy ID 1 
(Library fails to destroy here because things are now undefined from previous destroy
Component Destroyed ID1
Component Created ID2
Component Mounted ID2

我的代码正在使用 vuex 函数进行注销。我们基本上是在调度一个事件，该事件执行一个干净的“默认对象以清除我们拥有的许多 vuex 模块”的 deepClone 然后它会执行 router.push 到注销屏幕

我注意到我们所有的组件都以这种方式创建/安装。我的组件碰巧失败了，因为库试图访问它在上次销毁中删除的内容。

我取出了我们所有的 Keep-alives，但它仍然会发生。你们知道这种生命周期行为是否正常吗？我觉得这很奇怪。

编辑：

所以我找到了罪魁祸首。在我们的App.Vue 中有一个<router-view v-else>。 Vue 会在我登录时渲染我的组件，然后由于 v-else 失败，它会将其撕下，直到 v-else 再次为真。

我尝试了v-if，但它似乎不起作用。

【问题讨论】：

请提供minimal reproducible example。

您最好避免交换登录屏幕和您的实际路由器视图（使用 v-if/v-else） - 相反，使用弹出对话框甚至单独的登录路由。

我可以通过使用 v-show 来修复它，因为 vue 使用 css 隐藏了组件，而不是像 v-if/v-else 那样将其拆除。我认为我们确实有不同的路线。主路由视图就在 App.vue 中

【参考方案1】：

我将其更改为 v-show 并解决了问题。 Vue 只会用 css 隐藏组件，而不是把它拆下来重新挂载。