vue3中的自定义hook函数

1、介绍

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

2、使用

例如：给组件添加一个监听事件获取鼠标点击事件并复用

①如果不复用的话：（注意，如果不把这个函数单写成savePoint会报错）

②如果需要复用 ，可以进行了封装成hook导出，然后再需要复用的组件中引用就好了。

代码：

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
}

复用usePoint的Demo.vue

复用复用usePoint的Test.vue

参考视频：

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=156&spm_id_from=pageDriver