vue中keep-alive的用法及问题描述
2018-05-15 14:27
851 查看
1.keep-alive的作用以及好处
在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。
2.keep-alive的基本用法
在app.vue中
<!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
需要缓存的组件内容直接在router中添加:
meta: { keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存 }
3.keep-alive的生命周期
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
下面看下vue中 keep-alive 的使用问题及解决方案
问题描述
在业务开发中,会有路由跳转但是返回需要保留数据的场景;vue 中提供了 keep-alive 来处理
解决方案
返回dom不让其重新刷新,在vue-view外面包一层, 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中;
可以将 是否包裹 keep-alive 通过参数配置;
<keep-alive> <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view> //不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签; //需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签;
总结
以上所述是小编给大家介绍的vue中keep-alive的用法及问题描述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- vue 使某个组件不被 keep-alive 缓存的方法
- 解决vue keep-alive 数据更新的问题
- vue2使用keep-alive缓存多层列表页的方法
- 基于vue中keep-alive缓存问题的解决方法
- 详解关于Vue2.0路由开启keep-alive时需要注意的地方
- Vue中 key keep-alive的实现原理
- vue解决使用webpack打包后keep-alive不生效的方法
- vue 中的keep-alive实例代码
- vue.js内置组件之keep-alive组件使用
- vue keep-alive请求数据的方法示例
- vue中进入详情页记住滚动位置的方法(keep-alive)
相关文章推荐
- vue中keep-alive的用法及问题描述
- 基于vue中keep-alive缓存问题的解决方法
- vue keep-alive 数据更新问题
- vue使用keep-alive实现数据缓存不刷新
- vue.js 2.x 能否设置某个组件不被keep-alive 的解决方案
- vue2.0 keep-alive组件用法
- 通过vue提供的keep-alive减少对服务器的请求次数
- Vue路由开启keep-alive时的注意点
- 详解Vue路由开启keep-alive时的注意点
- Vue keep-alive实践总结
- vue2.0 keep-alive最佳实践
- vue中遇到的坑keep-alive、vue-router相关
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- Vue2.0 keep-alive 组件的最佳实践
- 解决vue单页使用keep-alive页面返回不刷新的问题
- vue缓存机制 keep-alive
- vue-router 之 keep-alive
- vue2.0 keep-alive最佳实践
- 再说HTTP Keep-Alive的设置问题
- Vue路由开启keep-alive时的注意点