vue3中的hook公共函数封装及运用

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>