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.clientWidth
	    screen.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>

代码007普通

打赏 收藏 海报 链接