vue项目使用keep-alive
作用:
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.
介绍:
keep-alive
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
用法也很简单:
<keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive>
props
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
1 // 组件 a 2 export default { 3 name: 'a', 4 data () { 5 return {} 6 } 7 }
1 <keep-alive include="a"> 2 <component> 3 <!-- name 为 a 的组件将被缓存! --> 4 </component> 5 </keep-alive>//可以保留它的状态或避免重新渲染
1 <keep-alive exclude="a"> 2 <component> 3 <!-- 除了 name 为 a 的组件都将被缓存! --> 4 </component> 5 </keep-alive>//可以保留它的状态或避免重新渲染
但实际项目中,需要配合vue-router共同使用.
router-view
也是一个组件,如果直接被包在 keep-alive
里面,所有路径匹配到的视图组件都会被缓存:
1 <keep-alive> 2 <router-view> 3 <!-- 所有路径匹配到的视图组件都会被缓存! --> 4 </router-view> 5 </keep-alive>
如果只想 router-view
里面某个组件被缓存,怎么办?
增加 router.meta 属性:
1 // routes 配置 2 export default [ 3 { 4 path: '/', 5 name: 'home', 6 component: Home, 7 meta: { 8 keepAlive: true // 需要被缓存 9 } 10 }, { 11 path: '/:id', 12 name: 'edit', 13 component: Edit, 14 meta: { 15 keepAlive: false // 不需要被缓存 16 } 17 } 18 ]
1 <keep-alive> 2 <router-view v-if="$route.meta.keepAlive"> 3 <!-- 这里是会被缓存的视图组件,比如 Home! --> 4 </router-view> 5 </keep-alive> 6 7 <router-view v-if="!$route.meta.keepAlive"> 8 <!-- 这里是不被缓存的视图组件,比如 Edit! --> 9 </router-view>
总结:
<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
keep-alive生命周期钩子函数:activated、deactivated
使用<keep-alive>
会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated
阶段获取数据,承担原来created钩子中获取数据的任务。