自定义 Hook：在 Vue3 中复用逻辑

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • [创建自定义 Hook](#创建自定义 Hook)
  • • [示例：创建一个自定义 Hook 用于计数](#示例：创建一个自定义 Hook 用于计数)
  • [使用自定义 Hook](#使用自定义 Hook)
  • • [示例：在组件中使用 `useCounter` Hook](#示例：在组件中使用 useCounter Hook)
  • 总结

在 Vue3 中，自定义 Hook 是一种复用逻辑的方式，它允许你将组件中的逻辑提取到可重用的函数中。自定义 Hook 是一个普通的 JavaScript 函数，通常使用 use 前缀来命名，以便于识别。

创建自定义 Hook

自定义 Hook 可以封装和复用任何逻辑，例如数据获取、状态管理或 DOM 操作等。

示例：创建一个自定义 Hook 用于计数

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

export function useCounter(initialValue = 0) {
const count = ref(initialValue);
const increment = () => count.value++;
const decrement = () => count.value--;

return { count, increment, decrement };
}

在这个例子中，useCounter Hook 返回了一个响应式的 count 引用以及两个方法 increment 和 decrement 来增加和减少计数值。

使用自定义 Hook

在组件中使用自定义 Hook 非常简单，只需调用它并将返回的值解构到组件的响应式数据和方法中。

示例：在组件中使用 useCounter Hook

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

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

export default {
setup() {
const { count, increment, decrement } = useCounter(0); // 使用自定义 Hook 并传入初始值

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

在这个组件中，我们导入了 useCounter Hook 并在 setup 函数中调用它。然后我们将返回的 count、increment 和 decrement 解构到组件的响应式数据和方法中。

总结

自定义 Hook 是 Vue3 中组织和复用逻辑的一种强大方式。通过将逻辑封装到可重用的函数中，你可以使组件更加简洁，并提高代码的可维护性。自定义 Hook 的命名通常以 use 开头，这是一种约定，有助于其他开发者识别这些函数是用于复用逻辑的 Hook。