Vuejs：使用keep alive的子routerview组件的生命周期钩子

Posted 2023-02-23

【中文标题】Vuejs：使用keep alive的子routerview组件的生命周期钩子

【英文标题】：Vuejs: Lifecycle hooks of child routerview components using keep alive

【发布时间】：2017-09-29 19:53:20

【问题描述】：

为了清楚理解，我将以更笼统的方式解释我的问题，这里是jsFiddle

我有两条主要路线，它们在 router-view 中显示两个不同的组件

Route-1 点击时路径为：'/route-1'

Route-2 点击时路径为：'/route-2/sub-route-a'

Route-2 在其中包含另一个 router-view，其中显示了两条子路由：

子路由-a

子路由-b

当点击 Route-2 时，它会打开 Route-2 的组件，并在其 @ 中预先打开 sub-route-a 987654324@

Route-2中的主路由视图和路由视图都包裹在keep-alive标签内，以便缓存

缓存，一切正常。

我添加了所有生命周期钩子并使用 console.log 查看调用了哪个钩子

第一次按预期为所有组件调用 beforeCreate()、created()、beforeMount()、mounted() 挂钩。

由于路由器视图位于keep-alive 元素下，因此也调用了activated() 挂钩

每当我在 Route-1 和 Route-2 之间来回移动时，分别在进入和离开时调用 activated() 和 deactivated() 挂钩对于每个组件

我的问题来了

自从点击 Route-2 后，它会打开 Route-2 和 sub-route-a 在其router-view 中预先打开，sub-route-a 组件的所有生命周期挂钩都是只调用一次

当我回到 Route-1 时，Route-2 的 deactivated() 被调用，但 sub-route-a 被调用。

只有当我在 sub-route-a 和 sub-route-b 之间切换时，才会调用这些组件的 activated() 和 deactivated() 挂钩

在随后进入 Route-2 时 activated() Route-2 的钩子被调用，但没有 sub-route-a 的钩子 被称为

我想缓存 sub-route-a 但在每次输入时对其进行更改。那么我应该把代码放在哪里，因为第一次没有调用生命周期钩子。

**我不想用**beforeEnter()

【问题讨论】：

在你的 sub-route-a 中使用 watch on route 怎么样？

@Deepak 这可能是一种解决方法，但是我不知道没有调用生命周期钩子，并且手表更昂贵

所以我尝试在提供的小提琴中执行您的问题的第 1 步和第 2 步。当我在 R1 和 R2 之间切换时，SUB-ROUTE A: deactivated 和 SUB-ROUTE A:activated 实际上正在被记录。

@Deepak 但我只激活和停用了 route-1 和 route-2，而不是 sub-route-a。 sub-route-a 的激活和停用仅在应用程序第一次运行时调用，然后在未登录后调用

每次我在 RouteA 和 RouteB 之间切换时，都会调用 SUB-ROUTE A 的激活钩子。我刚刚检查了你提供的小提琴。

【参考方案1】：

将您的 vue 版本升级到 2.2.0 或更高版本。小提琴有 2.3.2，最新的。而你的本地版本是 2.1.0。

在 2.2.0 及更高版本中，激活和停用将触发所有嵌套 树内的组件。

在这里阅读：https://vuejs.org/v2/api/#keep-alive

更新使用：npm update --save vue