vue keep-alive 如何打断点

由于`<keep-alive>`是Vue的内置组件，通常不会在其引入的源码中添加断点。

如果您需要在`<keep-alive>`中调试代码，可以尝试以下方法：

1. 在当前组件的生命周期函数中添加断点。例如，在`created()`或`mounted()`函数中添加断点，然后手动触发子组件的`$destroy()`函数来销毁组件，从而清除缓存。

<template>
  <keep-alive>
    <component v-if="component" :is="component"></component>
  </keep-alive>
</template>

<script>
  export default {
    data() {
      return {
        component: null
      }
    },
    created() {
      // 在created函数中添加断点
      debugger
      // 手动触发子组件的销毁函数来清除缓存
      this.$once('hook:destroyed', () => { this.component = null })
    }
  }
</script>

2. 在控制台使用`$destroy()`函数手动销毁组件并清除缓存。

// 找到需要销毁的组件实例
const componentInstance = this.$refs.keepAlive.$refs.cache[key]

// 手动销毁组件并清除缓存
componentInstance.$destroy()
delete this.$refs.keepAlive.cache[key]