Vue-实现组件全局和局部缓存

前言

    在某些特定的场景中，咱们不须要每次进入页面都去向后端发送对应的数据请求，这样子会大大增长服务器的压力，不是很友好。所以vue官方推出了keep-alive缓存组件标签，但问题是被这个标签包包裹的组件都将被所有缓存，这样子就只能拿到第一次的数据，这也不是咱们想要的，name如何实现组件页面的全局和局部缓存呢？请听我一一道来

第一步

该文章以App.vue为例

<keep-alive :include="keepArr">
    <router-view class="Routers"></router-view>
</keep-alive>
复制代码

第二步

data() {
        return {
            keepArr: [
                "recommend",
            ]
        }
        
        
复制代码

第三步

在recommend.vue中给组件name: 'recommend'

说明

• include是用来缓存给定组件的，有多个的状况下要加上 ':'
• keepArr哄的直是表明要被缓存的组件页面，若是不缓存就不写入该数组中
• 凡是在keepArr数组中的组件都是来自于.vue文件中的惟一name值，建议每一个.vue文文件都设置name名称做为惟一

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520