欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

使用Vue3实现组件缓存功能的keep-alive详解

最编程 2024-08-02 20:08:02
...

keep-alive

有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化

初次进入时onMounted-->onActivated 退出后触发deactivated再次进入只会触发 onActivated 事件挂载的方法等,只执行一次的放在onMounted中;组件每次进去执行的方法放在 onActivated

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

includeexclude

 <keep-alive :include="" :exclude="" :max=""></keep-alive>

include(包含) 和 exclude(排除)prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

推荐阅读