keep-alive缓存组件

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

将想要缓存的组件放在keep-alive标签中即可。

参数

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

include与exclude均可接收逗号分隔字符串、正则、数组作为参数，分别表示缓存与不缓存。

max指定最大缓存组件数量，LRU算法。

生命周期变化

开启keep-alive会引入onActivated与deActivated

执行顺序：

  • onMounted
  • onActivated
  • deActivated(退出后触发)
  • 再次进入只触发onActivated

如果有挂载时间，只执行一次可以放在onMounted中，每次加载都要执行可以放在onActivated中。