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

发布时间:2024年01月12日

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>
文章来源:https://blog.csdn.net/weixin_38673922/article/details/135545244
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。