内置组件keep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。
开启keep-alive 生命周期的变化
初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：
只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

  1. <!-- 基本 -->
  2. <keep-alive>
  3.   <component :is="view"></component>
  4. </keep-alive>
  6. <!-- 多个条件判断的子组件 -->
  7. <keep-alive>
  8.   <comp-a v-if="a > 1"></comp-a>
  9.   <comp-b v-else></comp-b>
  10. </keep-alive>
  12. <!-- 和 `<transition>` 一起使用 -->
  13. <transition>
  14.   <keep-alive>
  15.     <component :is="view"></component>
  16.   </keep-alive>
  17. </transition>

include 和 exclude

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

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

max

  1. <keep-alive :max="10">
  2.   <component :is="view"></component>
  3. </keep-alive>

版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122953072