Vue / keep-alive使用
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 //不需要被缓存的组件 } ]