如何在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.使用生命周期钩子：

一种。活性（）

湾 停用（）