在 Vue 3 中,自定义 Hooks 是一种将可复用的逻辑提取出来的有效方式。以下是创建和使用自定义 Hooks 的步骤:
一、创建自定义 Hook
1. 创建一个以use开头的函数,例如useMousePosition
// src下新建hook文件夹,然后创建useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'
function useMousePosition () {
// 定义响应式数据
const x = ref(0)
const y = ref(0)
// 定义一些方法
const updatePosition = (e) => {
x.value = e.pageX
y.value = e.pageY
}
onMounted (() => {
document.addEventListener('click', updatePosition)
})
onUnmounted(() => {
document.removeEventListener('click', updatePosition)
})
return {
x,
y
}
}
export default useMousePosition
二、使用自定义 Hook
1.在你的 Vue 组件中引入自定义 Hook。
// Mousemove.vue 文件中
<template>
<div>
<p>X: {{ x }}</p>
<p>Y: {{ y }}</p>
</div>
</template>
<script>
// 自定义hooks,一般都是 useXXXX
import { defineComponent } from 'vue'
import useMousePosition from './hooks/useMousePosition'
export default defineComponent({
setup () {
const {x, y} = useMousePosition()
return {
x,
y,
}
}
})
</script>
三、在自定义 Hook 中使用其他的 Vue 3 特性
1.使用组合式 API 的其他函数
例如使用watch
来观察响应式数据的变化:
import { ref, watch } from 'vue';
export function useDataWatcher () {
const data = ref('initial data')
const changeCount = ref(0)
watch(data, (old, new) => {
console.log(old, new)
changeCount.value ++
})
return {
data,
changeCount
}
}
2.使用计算属性(computed
)
import {ref, computed} from 'vue'
export function useformatData () {
const originData = ref('initial data')
const formatData = computed (() => {
return originData.value.toUpperCase()
})
return {
originData,
formatData
}
}
3.与 Vue Router 交互
// 如果你的项目中使用了 Vue Router,可以在自定义 Hook 中获取路由信息或进行导航操作。
// 首先确保在项目中引入了 Vue Router:
import { useRouter } from 'vue-router'
export function useRouterLogic () {
const router = useRouter()
const navigatorToPage = () => {
router.push('./another-page')
}
return {
navigatorToPage
}
}
4.与 Pinia(状态管理库)交互
// 假设你使用了 Pinia,可以在自定义 Hook 中获取和操作存储中的状态。
// 首先确保安装并引入了 Pinia:
import { useStore } from 'pinia'
export function useStoreLogic () {
const store = useStore()
const incrementStoreValue = () => {
store.incrementSomeValue()
}
return {
incrementStoreValue
}
}
通过自定义 Hooks,你可以将复杂的逻辑封装起来,使得代码更加清晰、可维护和可复用。同时,自定义 Hooks 也可以帮助你在不同的组件之间共享逻辑,避免重复代码的编写。