29.vue3学习篇-自定义hooks

在 Vue 3 中，自定义 Hooks 是一种将可复用的逻辑提取出来的有效方式。以下是创建和使用自定义 Hooks 的步骤：

一、创建自定义 Hook

1. 创建一个以use开头的函数，例如useMousePosition

// src下新建hook文件夹，然后创建useMousePosition.jsimport { ref, onMounted, onUnmounted } from 'vue'function useMousePosition () {// 定义响应式数据const x = ref(0)const y = ref(0)// 定义一些方法const updatePosition = (e) => {x.value = e.pageXy.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 也可以帮助你在不同的组件之间共享逻辑，避免重复代码的编写。