这篇文章是介绍一下vue3中的hooks以及它的用法,主要围绕两点来介绍,一个是hooks基本概念,另一个是vue3中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将碎片化的响应式变量和方法
按功能分块写
,实现高内聚低耦合
。