keep-alive

• 动态组件 is

 

 

 

• 用keep-alive 缓存动态组件

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

 

 

• keep-alive的生命周期

当组件在  内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

 

初次进入时：created > mounted > activated；退出后触发 deactivated

再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

 

• 应用

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：

商品列表页点击商品跳转到商品详情，返回后仍显示原有信息

订单列表跳转到订单详情，返回，等等场景。

 

• Props：
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。