vue3知识点：自定义hook函数

原创已于 2025-05-15 17:23:56 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #vue3 #自定义hook函数 #vue

于 2022-07-16 11:00:18 首次发布

Vue3专栏专栏收录该内容

31 篇文章

订阅专栏

本文通过一个具体的案例介绍了Vue3中的组合式API，特别是自定义Hook函数的使用。在`usePoint.js`中封装了鼠标点击时的坐标记录功能，并在`Demo.vue`组件中引入并使用。文章详细展示了从创建Hook函数到在组件中调用的步骤，以及在模板中展示鼠标坐标的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

二、常用 Composition API

问题：啥叫“组合式API”？

答案：请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

9.自定义hook函数

在这里插入图片描述
注意点1：
创建hooks文件夹，把每个模块需要封装的代码封装到一个js文件中，这样的好处是组件中看着很清爽，只管引入和调用即可，具体hook如何实现那是别人负责的，当前组件只管引入使用即可。

使用步骤：
1）封装每个模块的hook函数的js文件
2）组件中import引入hook函数
3）return中进行返回设置
4）页面模板中直接引用即可

案例：页面打印鼠标滑动坐标

项目代码

项目目录

在这里插入图片描述

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

App.vue

<template>
	<button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
	<Demo v-if="isShowDemo"/>
</template>

<script>
	import {ref} from 'vue'
	import Demo from './components/Demo'
	export default {
		name: 'App',
		components:{Demo},
		setup() {
			let isShowDemo = ref(true)
			return {isShowDemo}
		}
	}
</script>

usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

Demo.vue

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let point = usePoint()
			

			//返回一个对象（常用）
			return {sum,point}
		}
	}
</script>