当前位置：首页 > news >正文

vue3.x 自定义hook函数详细解读

news 来源：原创 2025/5/18 11:38:19

1. 什么是自定义 Hook 函数？

自定义 Hook 函数是一个封装了逻辑的 JavaScript 函数，它可以使用 Vue 3 的 Composition API 提供的响应式数据和生命周期钩子。通过自定义 Hook，你可以将组件的逻辑拆分成更小、更可复用的单元。

特点：

复用性：可以在多个组件中复用相同的逻辑。
可维护性：将逻辑抽离到独立的函数中，使组件代码更简洁。
组合性：多个 Hook 函数可以组合在一起，形成更复杂的逻辑。

2. 自定义 Hook 的使用场景

数据获取：封装异步数据获取逻辑。
事件监听：封装事件监听和销毁逻辑。
状态管理：封装共享状态逻辑。
副作用管理：封装定时器、DOM 操作等副作用逻辑。

3. 如何实现自定义 Hook 函数？

自定义 Hook 函数的实现步骤如下：

创建一个普通的 JavaScript 函数。
在函数中使用 Vue 3 的响应式 API（如 ref、reactive）和生命周期钩子（如 onMounted、onUnmounted）。
返回需要在组件中使用的数据或方法。

4. 示例代码

// useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  function reset() {
    count.value = initialValue;
  }

  return {
    count,
    increment,
    decrement,
    reset,
  };
}

在组件中使用：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter(10);

    return {
      count,
      increment,
      decrement,
      reset,
    };
  },
};
</script>