vue中实现在页面缩小或扩大时重新渲染所有组件

1、监听 resize 事件：
使用 Vue 3 的组合式 API来监听 resize 事件。

2、使用 key 强制重新渲染组件：
通过改变组件的 key 值来强制重新渲染。

<template>
  <div :key="resizeKey">
    <!-- 你的组件内容 -->
    <p>窗口大小改变时重新渲染</p>
  </div>
</template>

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

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

    const handleResize = () => {
      // 改变 key 值以触发重新渲染
      resizeKey.value += 1;
    };

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

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

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

解释
1、ref：使用 ref 创建一个响应式变量 resizeKey，用于强制重新渲染。
2、handleResize：在 resize 事件触发时，更新 resizeKey 的值。
3、onMounted 和 onUnmounted：在组件挂载时添加事件监听器，在组件卸载时移除事件监听器，以避免内存泄漏。
4、:key 属性：通过改变 key 值，Vue 会认为这是一个新的组件实例，从而重新渲染。