Vue3 自定义Hooks函数的封装

我爱加班、、

已于 2024-06-03 14:43:00 修改

阅读量1.7k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： # vue3 自定义hooks函数的封装文章标签： vue.js 前端 javascript ecmascript

于 2024-05-31 17:13:58 首次发布

本文链接：https://blog.csdn.net/weixin_48420104/article/details/139357002

1、如何理解vue3中的自定义hooks

在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。

自定义hooks通常遵循这样的命名约定：以 use 开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。

2、hooks与utils的区别

相同点：

通过 hooks 和 utils 函数封装，可以实现组件间共享和复用，提高代码的可重用性和可维护性。

不同点：

01.表现形式不同： hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等)；utils 一般用于封装相应的逻辑函数，没有组件的东西；

02.数据是否具有响应式： hooks 中如果涉及到 ref，reactive，computed 这些 api 的数据，是具有响应式的；而 utils 只是单纯提取公共方法就不具备响应式；

03.作用范围不同： hooks 封装，可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用；utils 通常是指一些辅助函数或工具方法，用于实现一些常见的操作或提供特定功能。

3、自定义hooks封装规范：

01、具备可复用功能，才需要抽离为 hooks 独立文件

02、函数名/文件名以 use 开头，形如: useXX

03、引用时将响应式变量或者方法显式解构暴露出来；

4、创建自定义hooks

创建自定义hooks非常简单，你只需要定义一个函数，这个函数内部可以包含你需要重用的任何逻辑：

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

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

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

  // 返回一个对象，包含响应式状态和函数
  return { count, increment, decrement };
}

5、使用自定义hooks

在组件中使用自定义hooks就像使用Vue提供的内置hooks一样：

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{
  
  { count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
  import { useCounte