vue----keep-alive缓存，activated,deactivated两个生命周期函数，，meta实现缓存

2019-12-14 21:06:58

参考地址 vue----keep-alive缓存，activated,deactivated两个生命周期函数，，meta实现缓存

keep-alive缓存（一般都要将首次创建的组件缓存，提高性能）

    

复制代码

将需要缓存的组件缓存在内存当中，下次再次访问的时候，直接从缓存中读取，而不是重新创建或者销毁……提高了性能

（<keep-alive>
       <component :=></component>
</keep-alive>

复制代码

 

keep-alive对应两个生命周期,activated(){}    deactivated(){}

 

复制代码

当从缓存中读取a组件时，此时a组件处于活跃状态，
当从缓存中读取b组件时，a组件处于缓存状态，此时b组件处于活跃状态，
 用途：
    eg:当在a组件浏览小说到某个位置，这时，我切换到b组件，那么就用a组件的缓存状态函数记录这个位置（），
当我再次切换到a组件，用活跃状态函数 保存到该位置        activated(){
    console.log("活跃状态");
},deactivated(){
    console.log("缓存状态")
}

复制代码

 利用include，exclude属性

复制代码

include属性表示


<keep-alive include=>
      <router-view></router-view>
</keep-alive>
<keep-alive exclude=>
      <router-view></router-view>
</keep-alive>

复制代码

利用meta属性

复制代码

export <keep-alive> 
 </keep-alive>



  • 精彩推荐

  • 2019-04-18 14:49:20

    Android图片加载框架最全解析，带你全面了解Glide 4的用法

    Glide的最新版本已经出到了4.4.0，可以说Glide 4已经是相当成熟和稳定了。而且也不断有朋友一直在留言，想让我讲一讲Glide 4的用法，因为Glide 4相对于Glide 3改动貌似还是挺大的，学完了Glide 3再去使用Glide 4，发现根本就无法使用。

  • 2019-04-23 13:57:37

    replace js 替换全部替换第一个

    RegExp("12333", "g"); 第一个参数是想要替换的内容 第二个参数“g”是匹配全部的意思，也可以换成"t"，就是匹配第一个

  • 2019-04-25 15:40:16

    JS对象是否拥有某属性如何判断

    原型链上继承过来的属性无法通过hasOwnProperty检测到，返回false。 需注意的是，虽然in能检测到原型链的属性，但for in通常却不行。