keep-alive理解及注意事项
keep-alive 是 vue 中内置组件，用 keep-alive 包裹的组件，用来缓存和保留当时状态的组件实例，而不是销毁它们。
主要是保存当时的组件状态和避免重复创建，避免重复渲染导致的性能问题。
特点
它是一个抽象组件，本身不会渲染一个 dom 元素，也不会出现在组件中的父组件链上 当组件在 keep-alive 内被切换的时候，组件内的 activated和deactivated这两个生命周期钩子函数会被执行。组件一旦被缓存，再次渲染就不会执行 created、mounted 生命周期钩子函数。要求同时只有 1个 子组件被渲染 函数式组件不能用，因为它们没有缓存实例。
使用场景
官方例子：
<!-- 1 动态组件（所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。） -->
<keep-alive>
<component is="currentComponent"></component>
</keep-alive>
<!-- 2 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="true"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- 3 transition -->
<transition>
<keep-alive>
<component is="currentComponent"></component>
</keep-alive>
</transition>
<!-- 4 结合vue-router -->
<keep-alive>
<router-view></router-view>
</keep-alive>
props
include白名单 只有名称匹配的组件会被缓存exclude黑名单 任何匹配的组件都不会被缓存max最多缓存多少实例，一旦达到这个数字，新实例被创建之前，会销毁已缓存组件中最久没有被访问到的实例---LRU 算法
include 和 exclude 首先检查组件的 name 属性，如果 name 不可用，则匹配局部注册名称。
匿名组件不能被匹配。
需要注意的地方
关于生命周期
当引入 keep-alive 的时候，
页面第一次进入，生命周期钩子的触发顺序：created --- mounted----activated;
退出时触发 deactivated；
当再次进入的时候，只触发 activated。
返回 dom 不让其重新刷新，只执行一次的放在 mounted 中；
组件每次进去执行的方法放在 activated 中。
关于注册组件
在 keep-alive 中直接添加 include，cachedViews----Array 类型：包含 vue 文件的组件 name 都将被缓存起来；反之 exclude 则是不会被缓存；
exclude 的优先级大于 include。
也就是说：当 include 和 exclude 同时存在的时候，exclude 会生效，include 不会生效的。
让我们一起携手同走前端路！
关注公众号回复【加群】即可
评论