面试题：Vue中如何基于Vue Composition API创建一个简单的自定义Hooks用于获取窗口尺寸

Question

请使用Vue Composition API编写一个自定义Hooks，实现获取浏览器窗口的宽度和高度，并在窗口尺寸变化时实时更新。要求给出完整的代码示例，并解释关键代码的作用。

Answer 1

<template>
  <div>
    <p>Width: {{ width }}</p>
    <p>Height: {{ height }}</p>
  </div>
</template>

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

const useWindowSize = () => {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  const handleResize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

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

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

  return {
    width,
    height
  };
};

const { width, height } = useWindowSize();
</script>

关键代码解释

1. ref(window.innerWidth) 和 ref(window.innerHeight)：使用 ref 创建响应式变量 width 和 height，并初始化为当前窗口的宽度和高度。
2. handleResize 函数：在窗口大小变化时，更新 width 和 height 的值。
3. onMounted 钩子：在组件挂载后，添加 resize 事件监听器，当窗口大小变化时调用 handleResize 函数。
4. onUnmounted 钩子：在组件卸载时，移除 resize 事件监听器，避免内存泄漏。
5. return { width, height }：返回包含 width 和 height 的对象，供组件使用。
6. const { width, height } = useWindowSize();：解构 useWindowSize 钩子返回的对象，获取 width 和 height 变量并在模板中使用。