keep-alive学习笔记

一、作用

  问题:从A页面到B页面,再返回A页面,A页面会重新调用created的生命钩子,重新请求数据,并重新渲染DOM;

  keep-alive可以缓存该页面,当返回A页面时不会重新调用created的生命钩子,但是activated 和 deactivated生命钩子会被调用;

   包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和  相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中;

二、用法

  在路由或者组件外套一个keep-alive标签;

  

    

  

  include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串或正则表达式来表示:

    include - 字符串或正则表达式。只有匹配的组件会被缓存;

    exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存;

  匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配。

  

    

  

  name为essence和firend的组件具有keep-alive的效果;

 

  具体可以看官网介绍:https://cn.vuejs.org/v2/api/?#keep-alive

转载于:https://www.cnblogs.com/670074760-zsx/p/6925814.html

你可能感兴趣的:(keep-alive学习笔记)