vue keep-alive缓存组件

我们创建一个vue项目 引入一下element ui
然后在src下的components 下应该会有一个HelloWorld.vue 如果没有 那就自己写一个
HelloWorld.vue 参考代码如下

<template>
  <div class="hello">
      <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="系统配置信息" name="systemConfig">
              <span>系统配置信息span>
          el-tab-pane>
          <el-tab-pane label="模块开关" name="moduleSwitch">
              <span>模块开关span>
          el-tab-pane>
          <el-tab-pane label="操作项配置" name="operationBoxConfig">
              <span>操作项配置span>
          el-tab-pane>
      el-tabs>
  div>
template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      activeName:'systemConfig',
    }
  }
}
script>


<style scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

然后我们编写 App.vue代码

<template>
  <div class="containers">
      <el-button @click = "setGuaz">{{ guaz?"关闭":"开启" }}el-button>
      <hello-world v-if = "guaz"/>
  div>
template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  data () {
    return {
      guaz: true
    }
  },
   components:{
      HelloWorld
    },
  methods: {
    setGuaz() {
      this.guaz = !this.guaz;
    },
  },
  mounted () {
  }
}
script>

<style lang="scss">
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

我们可以看到一个简单小案例 我们点击按键 下面的控件就会出现和消失


但我们会发现一个问题 当我们 切换到 第二和第三个时 在点击关闭 然后在打开 选择的就会变回第一个

因为 v-if 条件不成立 组件就被从DOM树上干掉了 在点击开启 组件就会被初始化 而初始化就会选中第一个

那我我们修改一下App.vue代码

<template>
  <div class="containers">
      <el-button @click = "setGuaz">{{ guaz?"关闭":"开启" }}</el-button>
      <keep-alive>
          <hello-world v-if = "guaz"/>
      </keep-alive>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  data () {
    return {
      guaz: true
    }
  },
   components:{
      HelloWorld
    },
  methods: {
    setGuaz() {
      this.guaz = !this.guaz;
    },
  },
  mounted () {
  }
}
</script>

<style lang="scss">
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

我们可以看到 我们给HelloWorld 组件 套上了一个keep-alive标签
然后我们在点击第二和第三个 然后在从上面点关闭 再开启 会发现选择的还是我们上次选择的那个 因为keep-alive会缓存组件 再次出现时会保留之前的操作结果