如何在vuejs中使用keep-alive？

Question

基本上，我想在路由器视图中保留2个组件并且它可以正常工作，但是，我不知道我是否正确地进行了操作。

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

用户和数据是路由名称。这是正确的方法吗？保持活着有什么缺点吗？

Answer 1

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

由于组件不再从头开始重建，因此您也会丢失创建，安装等生命周期钩子。您可以使用特定于keep-alive组件的挂钩替换这些生命周期挂钩。例如：

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

keep-alive是否处于劣势或优势完全取决于您的情况。如果您想保持状态，因为您希望在keep-alive组件之间快速切换，这可能是一个优势。如果你真的依赖于构建和销毁组件的清洁状态，那么它可能是一个缺点。

Answer 2

1。我们可以通过使用`

来实现

<keep-alive>
// Render component inside
</keep-alive>

`由vueJs提供的特殊标签。

2。使用生命周期挂钩：

a。 Activated（）

b。 deactivated（）