vue3中keepalive的使用

在Vue3中，keep-alive组件的使用与Vue2相似，但是有一些细微的差异。

1. 引入keep-alive组件

在Vue3中，需要在组件选项中引入`KeepAlive`组件，例如：

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

<script>
import { KeepAlive } from 'vue'

export default {
  components: {
    KeepAlive
  }
}
</script>

2. 设置include和exclude

和Vue2一样，可以使用`include`和`exclude`属性来设置哪些组件需要缓存，哪些组件不需要缓存。但是在Vue3中，这两个属性的值需要传递一个函数，而不是一个字符串数组。

<template>
  <keep-alive :include="includeComponent">
    <router-view />
  </keep-alive>
</template>

<script>
import { KeepAlive } from 'vue'

export default {
  components: {
    KeepAlive
  },
  methods: {
    includeComponent: (component) => {
      // 这里可以根据组件名称等条件判断是否需要缓存
      return true
    }
  }
}
</script>

3. 使用activated和deactivated钩子

在Vue2中，可以使用`activated`和`deactivated`钩子来监听keep-alive组件的激活和失活事件。在Vue3中，这两个钩子被重命名为`onActivated`和`onDeactivated`。

<template>
  <keep-alive :include="includeComponent" @activated="onActivated" @deactivated="onDeactivated">
    <router-view />
  </keep-alive>
</template>

<script>
import { KeepAlive } from 'vue'

export default {
  components: {
    KeepAlive
  },
  methods: {
    includeComponent: (component) => {
      // 这里可以根据组件名称等条件判断是否需要缓存
      return true
    },
    onActivated: (component) => {
      console.log('组件激活了', component)
    },
    onDeactivated: (component) => {
      console.log('组件失活了', component)
    }
  }
}
</script>