动态缓存组件，以及在指定条件下刷新，及include和exclude无效问题，踩坑（keep-alive）（vue）

最新推荐文章于 2023-04-12 19:02:48 发布

秃秃秃了

最新推荐文章于 2023-04-12 19:02:48 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：细聊vue 文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/weixin_61285710/article/details/122607439

细聊vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍Vue中使用keep-alive组件进行缓存的方法及注意事项，并提供如何通过控制字段实现缓存组件的刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

vue组件中，默认在离开当前页面时，即销毁组件。

当我们需要缓存时，我们便可以使用keep-alive对组件进行缓存

keep-alive

        是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

        include:：让什么组件缓存，添加到<keep-alive include=”组件名字”>

        exclude：不让什么组件缓存

踩坑：

        使用include/exclude 属性需要给所有vue类的name赋值（注意不是给route的name赋值），否则 include/exclude不生效

// name的正确位置
export default {
 name:'a', // include 或 exclude所使用的name
 data () {
 return{
    }
  },
}

实例：

缓存实例：，上代码

// 在App.vue中加入：这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。
<template>
  <div id="app">

    <keep-alive include="CustomerList"> // include="CustomerList" 表示缓存的组件名
      <router-view ></router-view>
    </keep-alive>

  </div>
</template>

// 或者在对应路由使用keepAlive: true 开启组件缓存
{
    path: '/customer-list',
    component: () => import('@/views/sidebar/customerList'),
    name: '客户列表',
    meta: {
      title: '客户列表',
      keepAlive: true
    }
  },
  
// 以上可实现组件缓存。

实例：

刷新实例，上代码

// app.vue缓存组件时，可以增加一个字段，用作对该keep-alive的显隐
<keep-alive v-if="isKeepAlive" :include="CustomerList">  // isKeepAlive是控制字段
   <router-view />
</keep-alive>

// 在methods里写一个刷新方法
  methods: {
    // 缓存刷新
    reload() {
      console.log('调用了清除keep-alive缓存事件')
      this.isKeepAlive = false
      this.$nextTick(() => {
        this.isKeepAlive = true
      })
    }
  }

// 在app.vue页面注入这个方法
provide() {
  return {
    reload: this.reload // 其他页面调用此方法可清除keep-alive缓存
  }
},


// 注入了这个方法后，其他页面注册后就可以直接调用此方法来达到刷新缓存的作用了
inject: ['reload'], // 其他页面注册
this.reload() // 在其他页面需要的地方直接调用即可

注：若对 provide 和 inject不太懂的小伙伴，可以移步

(45条消息) 组件通信、传值（父子、爷孙、多层级）（prop、$emit、provide、inject）（vue）_秃秃秃了的博客-CSDN博客_vue爷孙组件通信https://blog.csdn.net/weixin_61285710/article/details/122467431?spm=1001.2014.3001.5501