本文共 1115 字,大约阅读时间需要 3 分钟。
应项目需求,开发一个类似app的移动端H5项目,有tabbar标签切换,并需要保存当前状态。之前对vue学习不够全面,并不了解keep-alive属性,再查询各种资料,终于看到了keep-alive,简单好用,不禁感叹vue真是强大。
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和transition 相似,keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。// 组件export default { name: 'test-keep-alive', data () { return { includedComponents: "test-keep-alive" } }}
需要在router中设置router的元信息meta
//...router.jsexport default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello, meta: { keepAlive: false // 不需要缓存 } }, { path: '/page1', name: 'Page1', component: Page1, meta: { keepAlive: true // 需要被缓存 } } ]})
如图:这个是vux 插件,效果正是如此,状态保留在内存中,防止重复渲染。
那么问题来了,使用keep-alive缓存也会有弊端,会导致有些页面有些数据改变的时候,页面数据需要重新渲染,这时候可以配合watch 监听来解决。转载地址:http://ozhbb.baihongyu.com/