vue中keep-alive的⽤法及问题描述
1.keep-alive的作⽤以及好处
在做电商有关的项⽬中，当我们第⼀次进⼊列表页需要请求⼀下数据，当我从列表页进⼊详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使⽤keep-alive来缓存组件，防⽌⼆次渲染，这样会⼤⼤的节省性能。
2.keep-alive的基本⽤法
在app.vue中
<!-- 缓存所有的页⾯ -->
<keep-alive>
<router-view v-if="$a.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$a.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="$a.keepAlive" ></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive" ></router-view>
react router缓存
//不需要刷新的路由配置⾥⾯配置 meta: {keepAlive: true}, 这个路由则显⽰在上⾯标签；
//需要刷新的路由配置⾥⾯配置 meta: {keepAlive: false}, 这个路由则显⽰在下⾯标签；
总结
以上所述是⼩编给⼤家介绍的vue中keep-alive的⽤法及问题描述，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。