vue3 自定义hooks理解和使用~gpt一下~ 自定义 hooks 本质上是什么在 Vue 3 中，自定义 hoo

gpt一下~

自定义 hooks 本质上是什么 在 Vue 3 中，自定义 hooks 本质上是一组函数，它们封装和复用组件逻辑。这些函数可以让你在组件之间共享状态逻辑，而不必重复编写代码。 Vue 3 的 Composition API 为自定义 hooks 提供了可能，特别是通过 ref 和 reactive 等响应式引用和响应式状态管理功能。

自定义hooks 规范？

函数封装：自定义 hooks 是普通的 JavaScript 函数，它们可以接受参数并返回响应式状态或计算值。
单一职责原则：每个自定义 hook 应该只做一件事情，并且做好。这样可以确保 hook 的可重用性和可测试性。
命名规范：自定义 hook 应该以 use 开头，这样可以清楚地表明这是一个 hook，并且遵循了 Vue 3 和 React hooks 的命名约定。
无副作用：尽量确保自定义 hook 不产生副作用。如果确实需要副作用（如数据获取、事件监听），应该在 onMounted 生命周期钩子中添加，并在 onUnmounted 中清理。

自定义hooks的库？ 大家可以参考Ahooks链接，学习一下里面的思路，是react的。都一样的哈。

自定义hooks示例（使用它提取公共的逻辑，弹框等）？

export namespace HandleData {  
    export type MessageType = "" | "success" | "warning" | "info" | "error";  
}

import { ElMessageBox, ElMessage } from "element-plus";
import { HandleData } from "./interface";

/**
 * @description 操作单条数据信息 (二次确认【删除、禁用、启用、重置密码】)
 * @param {Function} api 操作数据接口的api方法 (必传)
 * @param {Object} params 携带的操作数据参数 {id,params} (必传)
 * @param {String} message 提示信息 (必传)
 * @param {String} confirmType icon类型 (不必传,默认为 warning)
 * 非必传的可以自行拓展哈
 * @param {String} width MessageBox 宽度 (不必传,默认为 '50%')
 * @param {String} height MessageBox 高度 (不必传,默认为 'auto')
 * @param {Object} ...otherArg 其他参数，在这收纳一下额外的参数 (不必传)
 * @returns {Promise}
 */
export const useHandleData = (
  api: (params: any) => Promise<any>,
  params: any = {},
  message: string,
  confirmType: HandleData.MessageType = "warning"
) => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(`是否${message}?`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: confirmType,
      draggable: true
    })
      .then(async () => {
        const res = await api(params);
        if (!res) return reject(false);
        ElMessage({
          type: "success",
          message: `${message}成功!`
        });
        resolve(true);
      })
      .catch(() => {
        //
      });
  });
};

import { useHandleData } from "@/hooks/useHandleData";

// 删除用户信息
const deleteAccount = async (params) => {
  await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`, "error");
    // (api接口,接口参数,提示信息，等)
    // 别忘记刷新一下list表格接口
};
// 重置用户密码
const resetPass = async (params) => {
  await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`);
    // 别忘记刷新一下list表格接口
};