vue3 keep-alive 更新数据

在 Vue3 中，Keep-alive 组件是用来缓存组件的。当组件被缓存时，它的状态和数据会被保存，而不是被销毁。当再次访问该组件时，它将被重新渲染，但是状态和数据将保持不变。

如果你想更新 Keep-alive 组件中的数据，可以使用 Vue3 中的 `teleport` 组件。`teleport` 允许你将组件渲染到 DOM 树的另一个位置，从而绕过 Keep-alive 的缓存。

下面是一个示例，演示如何使用 `teleport` 来更新 Keep-alive 组件中的数据：

<template>
  <keep-alive>
    <teleport to="body">
      <div>
        <h1>{{title}}</h1>
        <button @click="updateTitle">Update Title</button>
      </div>
    </teleport>
  </keep-alive>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello World');

    const updateTitle = () => {
      title.value = 'New Title';
    };

    return { title, updateTitle };
  }
}
</script>

在上面的示例中，我们使用 `teleport` 将组件渲染到了 `body` 元素中。这样做可以绕过 Keep-alive 的缓存，从而实现实时更新数据的效果。