vue3 语法糖setup使用keep-alive注意事项

动态组件使用keep-alive

1. 使用setup语法糖,定义组件TestCom2

// TestCom2
<template>
  <div>
    <h3 class="text-lg text-blue-600 ">这是TestCom2组件</h3>
    <div class="mt-2 ">
      <button class="my-btn" @click="count++">+</button>
      <span class="mx-2 "> {{count}} </span>
      <button class="my-btn" @click="count--">-</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style lang='scss' scope>
</style>

2. 不使用setup语法糖,定义组件TestCom1

// TestCom1
<template>
  <div>
    <h3 class="text-lg text-red-600 ">这是TestCom1组件</h3>
    <div class="mt-2 ">
      <button class="my-btn" @click="count++">+</button>
      <span class="mx-2 "> {{count}} </span>
      <button class="my-btn" @click="count--">-</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TestCom1',
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
})
</script>

<style scoped>
</style>

3. 不使用setup语法糖引入组件

<template>
   <div class="p-2 keep-alive">
    <div class="p-2 mb-2 border-b border-gray-500">
      <button class="my-btn" @click="currentCom = 'TestCom1'">组件1</button>
      <button class="my-btn" @click="currentCom = 'TestCom2'">组件2</button>
    </div>
    <div class="p-2 border rounded-md shadow-lg">
      <keep-alive include="TestCom1,TestCom2">
        <component :is="currentCom"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script lang="ts">
import TestCom1 from '@/components/define/TestCom1.vue'
import TestCom2 from '@/components/define/TestCom2.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
    TestCom1,
    TestCom2
  },
  data() {
    return {
      currentCom: 'TestCom1'
    }
  }
})
</script>

结论：不使用setup语法糖引入组件， 不使用include 都可以实现缓存， 使用include 后 TestCom1(没有用语法糖) 有缓存，TestCom2(用语法糖)没有缓存

4. 使用setup语法糖引入组件

<template>
   <div class="p-2 keep-alive">
    <div class="p-2 mb-2 border-b border-gray-500">
     <!-- templte中组件名称不要带''要不然显示不出来 -->
      <button class="my-btn" @click="currentCom = TestCom1">组件1</button>
      <button class="my-btn" @click="currentCom = TestCom2">组件2</button>
    </div>
    <div class="p-2 border rounded-md shadow-lg">
      <!-- 不适用include 可以实现缓存-->
      <!-- include="TestCom1",TestCom1可以实现缓存-->
      <!-- include="TestCom2",TestCom不能实现缓存-->
      <keep-alive include="TestCom1">
        <component :is="currentCom"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script setup>
import TestCom1 from '@/components/define/TestCom1.vue'
import TestCom2 from '@/components/define/TestCom2.vue'
import { ref, shallowRef } from 'vue'

const currentCom = shallowRef(TestCom1)
</script>

结论：使用setup语法糖引入组件， 不使用include 都可以实现缓存，使用include 后 TestCom1(没有用语法糖) 有缓存，TestCom2(用语法糖)没有缓存

总结: keepalive的include匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配,所以使用setup语法糖就无法使用使用include，需要进行取舍