组件之间的 Vue 生命周期年表是什么？

Question

假设我有一个 <router-view> 显示一个组件 (A)，通过 <router-link> 这个组件将被另一个 (B) 替换。

这两个组件都有自己的 beforeCreate 和 beforeDestroy 挂钩。我希望如果我从 A 导航到 B，事件顺序将是：

1. A.beforeDestroy
2. B.beforeCreate

但是在做了一些测试之后，它似乎完全相反：B.beforeCreate 总是被称为 before A.beforeDestroy。

正确吗？如果它是正确的，为什么会这样？对我来说没有意义...

在我的情况下，所有这些钩子都与一些常见数据交互，所以我在这里面临竞争条件......关于如何处理的任何建议？我需要在创建 B 之前完成一些在销毁 A 之前无法启动的事情......

Answer 1

在前一个组件被销毁之前，会先创建下一个组件。 目的显然是避免在视图从前一个组件转换到下一个组件时闪烁。

如果您想要的行为是确保始终在beforeDestroy而不是之前执行代码，您应该使用mounted或beforeMount生命周期钩子。