[JavaScript知识库]Vue3 自定义hook函数

首先 并没有用到新的 组合式api，本质就是为了封装和代码的复用性

什么是hook？

把setup函数中使用的组合式 Api进行封装? ?本质是一个函数 类似于Vue2中的mixin

优势：复用代码 让setup中的逻辑更清晰

案例：点击页面实现获取坐标的功能，并且有多个组件需要这个功能：

新建一个hooks文件夹 存放函数

函数编写如下 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 
}

需要打点功能的组件 如下

<template>
	<h2>其他的一些功能。。。。</h2>
    <br>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'
	export default {
		setup(){
			//数据
			let sum = ref(0)
            // 调用hooks函数  并接收数据
			let point = usePoint()
			
			return {sum,point}
		}
	}
</script>