vue3学习(九)
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。
keep-alive
有两个独有的生命周期:activated、 deactivated
接下来看一下keep-alive
的执行顺序:
- 首次进入页面触发:
onMounted、onActivated
- 退出或切换组件触发:
onDeactivated
,不会触发onUnmounted
- 再次进入触发:只会触发
onActivated
- 事件挂载的方法等,只执行一次的放在
onMounted
中;组件每次进去执行的方法放在onActivated
中
注意:keep-alive
里面只允许存放一个组件
<!-- 基本 -->
<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>
include、exclude和max
<keep-alive :include="['A','B']" :exclude="" :max=""></keep-alive>
include
(包含) 和 exclude
(不包含) 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
max
表示最多缓存的个数,超过这个限制会将之前失活的组件替换为最新的组件缓存起来。
更多推荐
vue3学习(九)
发布评论