1、監(jiān)聽 resize 事件：
使用 Vue 3 的組合式 API來監(jiān)聽 resize 事件。

2、使用 key 強制重新渲染組件：
通過改變組件的 key 值來強制重新渲染。

<template>
  <div :key="resizeKey">
    <!-- 你的組件內(nèi)容 -->
    <p>窗口大小改變時重新渲染</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const resizeKey = ref(0);

    const handleResize = () => {
      // 改變 key 值以觸發(fā)重新渲染
      resizeKey.value += 1;
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      resizeKey
    };
  }
};
</script>

解釋
1、ref：使用 ref 創(chuàng)建一個響應(yīng)式變量 resizeKey，用于強制重新渲染。
2、handleResize：在 resize 事件觸發(fā)時，更新 resizeKey 的值。
3、onMounted 和 onUnmounted：在組件掛載時添加事件監(jiān)聽器，在組件卸載時移除事件監(jiān)聽器，以避免內(nèi)存泄漏。
4、:key 屬性：通過改變 key 值，Vue 會認(rèn)為這是一個新的組件實例，從而重新渲染。