vue3 自定义hooks（组合式函数）

什么是hooks

自定义hooks 是Vue3 组合式函数的别称。

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

• 命名规范
  • 组合式函数的命名通常以 “use” 开头，以便于识别它们是可复用的逻辑单元。
  • 例如，useCounter、useFetchData等。
• 函数结构
  • 组合式函数可以接收一些参数，这些参数可以是初始值、配置选项等。
  • 函数内部可以使用 Vue 的响应式 API（如ref、reactive等）来创建响应式数据，并定义一些方法来操作这些数据。
  • 最后，函数返回一个包含响应式数据和方法的对象。
• 使用方式
  • 在 Vue 组件中，使用import语句导入 hooks ，并像调用普通函数一样调用它们。
    例如：import { useMouse } from './mouse.js';
  • 在使用时，显式的将响应式变量或者方法解构暴露出来
    例如：const { x, y } = useMouse()

hooks优点

• hooks 作为独立逻辑的组件封装，其内部的属性、函数等和外部组件具有响应式依附的作用。
  • hooks 内部可以使用 Vue 3 的响应式 API（如 ref、reactive 等）来创建响应式数据。当这些 hooks 被外部组件调用时，它们返回的响应式数据可以在组件中直接使用，并且与外部组件的响应式系统相连接。
  • Vue 的响应式系统会自动收集对响应式数据的依赖关系。当 hooks 内部的响应式数据发生变化时，所有依赖于这些数据的组件都会自动触发更新。
• hooks 可以与 Vue 3 的组合式 API 无缝结合，高内聚低耦合。
• hooks 是独立的函数，可以更容易地对其进行单元测试。

Vue hooks库

• VueUse ：一个基于 Vue 3 Composition API 的高质量 Hooks 库。
  • 安装：npm i @vueuse/core

使用

一个简单的加减功能

useCounter.ts：

import { ref } from 'vue';
// 按照惯例，组合式函数名以“use”开头
export function useCounter(initialValue = 0) {const count = ref(initialValue);const increment = () => {count.value++;};const decrement = () => {count.value--;};// 通过返回值暴露响应式变量、方法return {count,increment,decrement,};
}

在.vue中使用：

<template><div><div>Count: {{ count }}</div><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template>
<script setup lang="ts" >
import { useCounter } from './useCounter.ts';
const { count, increment, decrement } = useCounter();
</script>

鼠标跟踪功能

把功能实现封装到mouse.ts中：

// mouse.ts
import { onMounted, onUnmounted, ref } from 'vue'// 按照惯例，组合式函数名以“use”开头
export function useMouse() {// 被组合式函数封装和管理的状态const x = ref(0)const y = ref(0)// 组合式函数可以随时更改其状态。function update(event:any) {x.value = event.pageXy.value = event.pageY}// 一个组合式函数也可以挂靠在所属组件的生命周期上// 来启动和卸载副作用onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))// 通过返回值暴露所管理的状态return { x, y }
}

在.vue中使用：

<template>Mouse position is at: {{ x }}, {{ y }}</template>
<script setup lang="ts">
import { useMouse } from './mouse.js'const { x, y } = useMouse()
</script>