vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能
- 使用Vue3的组合API封装的可复用的功能函数
- 自定义hook的作用类似于vue2中的mixin技术
- 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
1、封装一个hooks
hooks/myHook.ts文章来源：https://www.toymoban.com/news/detail-791492.html
import { reactive } from 'vue'
export function screenWH() { // 导出一个默认方法
// 创建一个对象，保存宽度和高度值
const screen = reactive({
width: 0,
height: 0
})
// 创建一个方法，获取可视化界面的宽度和高度值
const getWH = () => {
screen.width = document.documentElement.clientWidth
screen.height = document.documentElement.clientHeight
}
return { screen, getWH } // 方法返回宽高值
}
2、运用封装的hook文章来源地址https://www.toymoban.com/news/detail-791492.html
<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>
到了这里，关于vue3中的hook公共函数封装及运用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
