Vue3 自定义hooks

  这篇文章是介绍一下vue3中的hooks以及它的用法，主要围绕两点来介绍，一个是hooks基本概念，另一个是vue3中hooks的使用方法，本文结合实例代码给大家讲解的非常详细，需要的朋友参考下吧。

Hooks的基本概念

  虽然官网没有说hooks具体是什么，但其实自定义hooks本质上是一个函数，通常结合Composition API使用。抽离setup函数中可复用逻辑，按需引入和调用来降低代码耦合度。具体为：

• 将可复用的代码逻辑抽离成外部ts文件；
• 函数名/文件名以use开头，比如useDialog；
• setup函数中解构出响应式变量和方法，比如const { visible } = useDialog(false);

Hooks的简单用法

  首先在scr目录下创建hooks文件夹，用于存储自定义hooks文件。
  然后根据需要写hook文件，比如要实现一个功能就是在点击页面时，记录鼠标当前的位置，可以在hooks文件夹中新建一个文件useMousePosition.js

// src/hooks/useMousePosition.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue'

interface MousePosition {
  x: Ref<number>,
  y: Ref<number>
}
function useMousePosition(): MousePosition {
	const x = ref(0)
	const y = ref(0)	
	const updateMouse = (e: MouseEvent) => {
		x.value = e.pageX
	    y.value = e.pageY
	}	
	onMounted(() => {
	    document.addEventListener('click', updateMouse)
	})
	onUnmounted(() => {
	    document.removeEventListener('click', updateMouse)
	})
	return { x, y }
}

export default useMousePosition

  在需要用到该hook功能的组件上导入并使用

// src/views/test.vue
<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

<script lang="ts" setup>
	import { defineComponent } from 'vue'
	// 引入hooks
	import useMousePosition from '../../hooks/useMousePosition'
	// 采用解构的方法
	const { x, y } = useMousePosition()
</script>

总结

• Vue2时代Option Api ，data、methos、watch…分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！
• Vue3时代出现Composition Api，通过利用各种Hooks和自定义Hooks将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合。

参考资料：https://www.jb51.net/article/277347.htm