首页vue3 hooks 案例

vue3 hooks 案例

时间: 2025-01-21 14:23:22 浏览: 59

### Vue3 Hooks 使用示例在 Vue 3 中，Hooks 是一种通过组合式 API (Composition API) 实现的功能模块化方式。这使得开发者可以更灵活地重用逻辑代码并保持组件清晰。 #### 自定义 Hook 封装视口尺寸监听器下面是一个具体的例子，展示了如何创建一个用于获取浏览器窗口大小变化的自定义 Hook `useVwSize`： ```javascript // src/hooks/useVwSize.js import { onMounted, onUnmounted, reactive } from 'vue'; export function useVwSize() { const sizeData = reactive({ width: window.innerWidth, height: window.innerHeight }); const handleResize = () => { sizeData.width = window.innerWidth; sizeData.height = window.innerHeight; }; onMounted(() => window.addEventListener('resize', handleResize)); onUnmounted(() => window.removeEventListener('resize', handleResize)); return { ...sizeData }; } ``` 此段代码实现了当页面加载完成时自动绑定事件处理器，在卸载组件前移除该处理程序以防止内存泄漏[^2]。为了展示这个 hook 如何被实际应用到组件当中，这里给出一段简单的模板实例： ```html <template> <div> Window Size: {{ width }} x {{ height }} </div> </template> <script setup> import { ref } from 'vue'; import { useVwSize } from './hooks/useVwSize'; const { width, height } = useVwSize(); </script> ``` 上述代码片段中，通过 `<script setup>` 新特性引入了 `useVwSize()` 函数，并解构返回的对象来访问宽度和高度属性。

阅读全文