vue.js - 如何在vuejs中使用keep-alive？

Question

基本上，我想让 router-view 中的 2 个组件保持事件状态，并且它可以工作，但是，我不知道我是否做对了。

 <keep-alive include="users, data">
    <router-view></router-view>
 </keep-alive>

users 和 data 是路由名称。这是正确的方法吗？ keep-alive有什么缺点吗？

Answer 1

唯一的缺点是这些组件保存在内存中，因此它们的状态被保存而不是重置。

您还会丢失生命周期 Hook ，例如创建、安装等，因为组件不再从头开始重建。您可以将那些生命周期 Hook 替换为特定于 keep-alive 组件的 Hook 。例如:

https://v2.vuejs.org/v2/api/#activated

keep-alive 是劣势还是优势完全取决于您的场景。如果您想保持状态是因为您希望快速且经常在 keep-alive 组件之间切换，这可能是一个优势。如果您真的依赖于构建和销毁组件的干净状态，那可能是一个缺点。