vue中keep-alive

Keeplive组件介绍

    ⑴.为什么要使用keep-alive

            在vue中,我们使用component内置组件或者vue-router切换视图的时候,由于vue会主动卸载不使用的组件,所以我们不能保存组件之前的状态,而我们经常能遇到需要保存之前状态的需求,例如:搜索页(保存搜索记录),列表页(保存之前的浏览记录)等等。

    ⑵.keep-alive的作用

            Keep-alive是一个vue的内置组件,它能将不活动的组件保存下来,而不是直接销毁,当我们再次访问这个组件的时候,会先从keep-alive中存储的组件中寻找,如果有缓存的话,直接渲染之前缓存的,如果没有的话,再加载对应的组件。

            作为抽象组件,keep-alive是不会直接渲染在DOM中的。

    ⑶.Keep-alive的属性

        Keep-alive提供了三种可选属性

        Include-字符串或数组或正则表达式。只有名称匹配的组件被缓存。

        Exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。

        Max -数字类型。表示最多可以缓存多少组件实例。

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

 include属性表示只有name属性为bookLists,bookLists的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存

也可以通过路由表中的mate属性 配置哪些需要缓存

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello,

      meta: {

        keepAlive: false // 不需要缓存

      }

    },
]
})
<keep-alive >
      <router-view v-if="this.$route.meta.keepAlive"> </router-view>
</keep-alive>

      <router-view v-if="!this.$route.meta.keepAlive"> </router-view>

 

    ⑷.对于keep-alive需要知道的事情

        Keep-alive提供了两个生命钩子,分别是activated与 deactivated。

        1.初次进入时:created > mounted > activated;退出后触发 deactivated
        2.再次进入:会触发 activated;

        因为Keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

        注意如果是动态路由使用 keep-alive 需要给 router-view 设置key值

        动态路由大多是使用一个组件 只是数据不同 所以key值 直接设置自己的路由信息即可

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>

 

 

 

 

 

 

 

 

 

 

 

 

 

已标记关键词 清除标记
相关推荐
<p> <strong><span style="font-size:16px;color:#003399;">会用Python分析金融数据 or 金融行业会用Python</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">职场竞争力更高</span></strong> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231042221925.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">Python金融数据分析入门到实战</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">Get√金融行业数据分析必备技能</span></strong> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231042438069.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">以股票量化交易为应用场景</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">完成技术指标实现的全过程</span></strong> </p> <p> <br /> </p> <p> <span style="font-size:14px;">课程选取股票量化交易为应用场景,由股票数据的获取、技术指标的实现,逐步进阶到策略的设计</span><span style="font-size:14px;">和回测,由浅入深、由技术到思维地为同学们讲解Python金融数据分析在股票量化交易的应用</span><span style="font-size:14px;">。</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231043183686.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">以Python为编程语言</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">解锁3大主流数据分析工具</span></strong> </p> <p> <br /> </p> <p> <span style="font-size:14px;">Python做金融具有先天优势,课程提取了Python数据分析工具NumPy、Pandas及可视化工具</span><span style="font-size:14px;">Matplotlib的关键点详细讲解,帮助同学掌握数据分析的关键技能。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231043472858.png" alt="" /> </p> <p> <strong><span style="font-size:16px;color:#003399;"><br /> </span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">2大购课福利</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;"><br /> </span></strong> </p> <p> <img src="https://img-bss.csdnimg.cn/202012300628195864.png" alt="" /> </p>
<p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>1</span><span style="font-family:宋体;">)</span><span>HTML5 WebSocket</span><span style="font-family:宋体;">、异常重连、心跳检测;</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>2</span><span style="font-family:宋体;">)</span><span>SockJS</span><span style="font-family:宋体;">、</span><span>Stomp</span><span style="font-family:宋体;">、</span><span>RabbitMQ Stomp</span><span style="font-family:宋体;">消息代理;</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>3</span><span style="font-family:宋体;">)分别用</span><span>Nginx</span><span style="font-family:宋体;">和</span><span>Spring Cloud Gateway</span><span style="font-family:宋体;">实现多实例负载均衡;</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>4</span><span style="font-family:宋体;">)可靠消息推送(</span><span>Stomp</span><span style="font-family:宋体;">持久化队列、客户端</span><span>ACK</span><span style="font-family:宋体;">确认机制);</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>5</span><span style="font-family:宋体;">)</span><span>Java</span><span style="font-family:宋体;">原生、</span><span>Stomp</span><span style="font-family:宋体;">客户端实现(非浏览器客户端);</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>6</span><span style="font-family:宋体;">)</span><span>Websocket</span><span style="font-family:宋体;">拦截器结合</span><span> Spring security</span><span style="font-family:宋体;">、</span><span>jwt token</span><span style="font-family:宋体;">认证授权。</span> </p> <p class="MsoNormal"> <span style="font-family:宋体;">(</span><span>7</span><span style="font-family:宋体;">)</span><span>VUE+elementUI</span><span style="font-family:宋体;">前后分离实现。</span> </p>
DirectX修复工具(DirectX Repair)是一款系统级工具软件,简便易用。本程序为绿色版,无需安装,可直接运行。 本程序的主要功能是检测当前系统的DirectX状态,如果发现异常则进行修复。程序主要针对0xc000007b问题设计,可以完美修复该问题。本程序包含了最新版的DirectX redist(Jun2010),并且全部DX文件都有Microsoft的数字签名,安全放心。 本程序为了应对一般电脑用户的使用,采用了易用的一键式设计,只要点击主界面上的“检测并修复”按钮,程序就会自动完成校验、检测、下载、修复以及注册的全部功能,无需用户的介入,大大降低了使用难度。在常规修复过程,程序还会自动检测DirectX加速状态,在异常时给予用户相应提示。 本程序适用于多个操作系统,如Windows XP(需先安装.NET 2.0,详情请参阅“致Windows XP用户.txt”文件)、Windows Vista、Windows 7、Windows 8、Windows 8.1、Windows 8.1 Update、Windows 10,同时兼容32位操作系统和64位操作系统。本程序会根据系统的不同,自动调整任务模式,无需用户进行设置。 本程序的V4.0版分为标准版、增强版以及在线修复版。所有版本都支持修复DirectX的功能,而增强版则额外支持修复c++的功能。在线修复版功能与标准版相同,但其所需的数据包需要在修复时自动下载。各个版本之间,主程序完全相同,只是其配套使用的数据包不同。因此,标准版和在线修复版可以通过补全扩展包的形式成为增强版。本程序自V3.5版起,自带扩展功能。只要在主界面的“工具”菜单下打开“选项”对话框,找到“扩展”标签,点击其的“开始扩展”按钮即可。扩展过程需要Internet连接,扩展成功后新的数据包可自动生效。扩展用时根据网络速度不同而不同,最快仅需数秒,最慢需要数分钟,烦请耐心等待。如扩展失败,可点击“扩展”界面左上角小锁图标切换为加密连接,即可很大程度上避免因防火墙或其他原因导致的连接失败。 本程序自V2.0版起采用全新的底层程序架构,使用了异步多线程编程技术,使得检测、下载、修复单独进行,互不干扰,快速如飞。新程序更改了自我校验方式,因此使用新版本的程序时不会再出现自我校验失败的错误;但并非取消自我校验,因此程序安全性与之前版本相同,并未降低。 程序有更新系统c++功能。由于绝大多数软件运行时需要c++的支持,并且c++的异常也会导致0xc000007b错误,因此程序在检测修复的同时,也会根据需要更新系统的c++组件。自V3.2版本开始使用了全新的c++扩展包,可以大幅提高工业软件修复成功的概率。修复c++的功能仅限于增强版,标准版及在线修复版在系统c++异常时(非丢失时)会提示用户使用增强版进行修复。除常规修复外,新版程序还支持C++强力修复功能。当常规修复无效时,可以到本程序的选项界面内开启强力修复功能,可大幅提高修复成功率。请注意,请仅在常规修复无效时再使用此功能。 程序有两种窗口样式。正常模式即默认样式,适合绝大多数用户使用。另有一种简约模式,此时窗口将只显示最基本的内容,修复会自动进行,修复完成10秒钟后会自动退出。该窗口样式可以使修复工作变得更加简单快速,同时方便其他软件、游戏将本程序内嵌,即可进行无需人工参与的快速修复。开启简约模式的方法是:打开程序所在目录下的“Settings.ini”文件(如果没有可以自己创建),将其的“FormStyle”一项的值改为“Simple”并保存即可。 新版程序支持命令行运行模式。在命令行调用本程序,可以在路径后直接添加命令进行相应的设置。常见的命令有7类,分别是设置语言的命令、设置窗口模式的命令,设置安全级别的命令、开启强力修复的命令、设置c++修复模式的命令、控制Direct加速的命令、显示版权信息的命令。具体命令名称可以通过“/help”或“/?”进行查询。 程序有高级筛选功能,开启该功能后用户可以自主选择要修复的文件,避免了其他不必要的修复工作。同时,也支持通过文件进行辅助筛选,只要在程序目录下建立“Filter.dat”文件,其的每一行写一个需要修复文件的序号即可。该功能仅针对高级用户使用,并且必须在正常窗口模式下才有效(简约模式时无效)。 本程序有自动记录日志功能,可以记录每一次检测修复结果,方便在出现问题时,及时分析和查找原因,以便找到解决办法。 程序的“选项”对话框包含了7项高级功能。点击"常规”选项卡可以调整程序的基本运行情况,包括日志记录、安全级别控制、调试模式开启等。只有开启调试模式后才能在C
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页