一招学会自定义hook函数---让你的代码更精简

什么是hook？

        本质是一个函数，把setup函数中使用的Composition API进行了封装。

        类似于vue2.x中的mixin。

        自定义hook一般放在src下面hooks文件夹里面  文件名使用use开头方法

        自定义 Hook 是一个函数，函数内部可以调用其他的 Hook。

自定义hook的优势:

        复用代码, 让setup中的逻辑更清楚易懂。

        自定义hook相对于普通js复用逻辑的抽离,然后可以在页面调用

代码演示:

        我们通过一个小的功能来体现hook的用法 

        我们在组件中写了一个鼠标点击就把点击的坐标显示在页面中

        现在另一个组件也想要当前组件的这个功能鼠标点击显示坐标。

        我们可以通过把当前实现功能的代码复制到另一个组件中使用，但是这种方式实现起来代码比较冗余且难以维护 所以我们并不推荐这种做法！

        最好的实现方法是把功能相关的数据方法以及生命周期钩子抽离放在一个单独的hook文件中

        这个时候我们通常会在src文件中创建一个新的文件夹hooks 里面存放的一些hook文件（文件名通常以use开头）

         让后将抽离的代码放在一个函数里将处理完的数返回出来 并向外暴露函数

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
}

        然后在组件中引入该函数并调用该函数 将接收的结果返回  让页面显示

        在浏览器中打开可以看到 功能依然是好用的

         如果多个组件想使用这个功能 可以使用相同的方法将函数引入后使用