长沙做网站优化深圳全网营销型网站
vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能
- 使用Vue3的组合API封装的可复用的功能函数
- 自定义hook的作用类似于vue2中的mixin技术
- 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
1、封装一个hooks
hooks/myHook.ts
import { reactive } from 'vue'export function screenWH() { // 导出一个默认方法// 创建一个对象，保存宽度和高度值const screen = reactive({width: 0,height: 0})// 创建一个方法，获取可视化界面的宽度和高度值const getWH = () => {screen.width = document.documentElement.clientWidthscreen.height = document.documentElement.clientHeight}return { screen, getWH } // 方法返回宽高值}
2、运用封装的hook
<template><h3>hooks公共方法封装</h3><p>页面宽度: {{screen.width}}</p><p>页面高度: {{screen.height}}</p><a-button @click="getWH">获取页面的宽高</a-button></template><script lang="ts" setup>import {screenWH} from "../hooks/index"let { screen, getWH } = screenWH()</script><style scoped></style>