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

什么是hooks

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

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

• 命名规范
  • 组合式函数约定用驼峰命名法命名，并以“use”作为开头。以便识别它们是可复用的逻辑单元。
  • 例如，useCounter、useFetchData等。
• 函数结构
  • 组合式函数可以接收一些参数，这些参数可以是初始值、配置选项等。
  • 函数内部可以使用 Vue 的响应式 API（如ref、reactive等）来创建响应式数据，并定义一些方法来操作这些数据。
  • 最后，函数返回一个包含响应式数据和方法的对象。
• 返回值
  • Vue官方推荐组合式函数始终返回一个包含多个 ref 的普通的非响应式对象，该对象在组件中被解构为 ref 之后仍可以保持响应性：
    当组合式函数返回一个包含多个 ref 的对象时，在组件中解构这个对象后，每个解构出来的 ref 仍然保持响应性。这意味着如果 ref 的值发生变化，组件会自动重新渲染以反映这个变化。
  • 可以使用reactive()包装返回的对象：

const mouse = reactive(useMouse())
// mouse.x 链接到了原来的 x ref
console.log(mouse.x)

• 使用方式
  • 在 Vue 组件中，使用import语句导入 hooks ，并像调用普通函数一样调用它们。
    例如：import { useMouse } from '@/hooks/mouse.js';
  • 在使用时，显式的将响应式变量或者方法解构暴露出来
    例如：const { x, y } = useMouse()

使用

一个简单的加减功能

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 '@/hooks/useCounter.ts';
const {
      count, increment, decrement } = useCounter();
</script>

鼠标跟踪功能

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

// mouse.ts
import {