码迷,mamicode.com
首页 > 其他好文 > 详细

Vue / keep-alive使用

时间:2019-03-29 17:44:51      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:lis   正则表达   pre   表示   create   clu   数据   承担   bsp   

keep-alive

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素

<keep-alive>
    <loading></loading>
</keep-laive>

keep-alive生命周期钩子函数:activated、deactivated

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

 activated() {
    this.onQueryClick(1);//获取最新数据
  }

 

prop:

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

1.利用include、exclude属性

<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的组件不会被缓存,其它组件都会被缓存

2.利用meta属性

export default[
 {
  path:‘/‘,
  name:‘home‘,
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:‘/book‘,
  name:‘book‘,
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

 

Vue / keep-alive使用

标签:lis   正则表达   pre   表示   create   clu   数据   承担   bsp   

原文地址:https://www.cnblogs.com/wsprince/p/10622503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!