组件缓存之keep-alive实现原理

最新推荐文章于 2024-06-01 23:46:08 发布

翔翔要努力！

最新推荐文章于 2024-06-01 23:46:08 发布

阅读量819

点赞数

分类专栏：前端知识文章标签：缓存 javascript vue.js

本文链接：https://blog.csdn.net/m0_70858457/article/details/129437518

版权

在Vue中，可以使用<keep-alive>标签来实现组件的缓存。<keep-alive>是Vue内置的一个抽象组件，用于包裹需要被缓存的组件，并提供了一些特殊的属性和钩子函数来管理这些被缓存的组件实例。下面是实现<keep-alive>的方法：

模板中使用<keep-alive>标签包裹需要被缓存的组件，例如：

<keep-alive>
  <component :is="currentTab"></component>
</keep-alive>

被缓存的组件中实现activated和deactivated生命周期钩子函数，分别用于处理组件的激活和停用。例如：

export default {
  activated() {
    // 组件被激活时的操作
  },
  deactivated() {
    // 组件被停用时的操作
  }
}

在<keep-alive>标签上设置include和exclude属性来控制哪些组件需要被缓存，哪些组件不需要被缓存。include属性是一个字符串或正则表达式，表示只有符合条件的组件才会被缓存，而exclude属性是一个字符串或正则表达式，表示符合条件的组件不会被缓存。例如：

关注