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-01-24 16:11:39

    数据库去除重复记录

    如何删除数据库中重复的记录 一般情况下，数据库去重复有以下那么三种方法：

  • 2019-01-26 10:12:40

    一行代码让webview不加载图片

    最近项目中需要控制列表页和详情页图片资源的显示，列表页比较好做，详情页是用WebView来展示的，不太好控制图片资源的加载。在Google上找到了两个解决办法，跟大家分享一下！

  • 2019-01-29 14:33:07

    child_process中spawn和exec方法的使用

    child_process是nw.exe的一个内置模块，通过它可以实现创建多线程，并可实现主线程和子线程之间的通信。child_process模块中主要使用有两个方法spawn和exec，这两个方法都可以用来创建子线程。除了spawn和exec外，child_process模块还有execFile,fork,spawnSync,execFileSync,execSync，它们都是基于spawn的不同封装。 --------------------- 作者：黄泽平 来源：CSDN 原文：https://blog.csdn.net/zeping891103/article/details/52230175 版权声明：本文为博主原创文章，转载请附上博文链接！

  • 2019-01-29 14:50:51

    Node.js 编写跨平台 spawn 语句

    Node.js 是跨平台的，也就是说它能运行在 Windows、OSX 和 Linux 平台上。很多 Node.js 开发者都是在 OSX 上做开发的，然后再将代码部署到 Linux 服务器上。由于 OSX 和 Linux 都是基于 Unix 的，因此两者共性很多。Windows 也是 Node.js 官方支持的平台，只要你通过正确的方式写代码，就能在各个平台上毫无压力的跑起来。