Vue3 hooks 的使用

Vue3 hooks 的使用

命名规范

  • 使用 useXxx 命名风格,表明这是一个组合函数。

单一职责原则

  • 每个 Hook 应专注于一个功能或逻辑单元,避免将多个不相关的逻辑混合在一起。
ts 复制代码
  // bad
  function useUserAndProduct() { ... }

  // good
  function useUser() { ... }
  function useProduct() { ... }

可复用性与参数化

  • 通过传参提升灵活性,使 Hook 能在不同组件中复用
ts 复制代码
function useFetch<T>(url: string): { data: Ref<T>; loading: Ref<boolean> } {
  const data = ref<T>();
  const loading = ref(true);

  fetch(url)
    .then((res) => res.json())
    .then((json) => {
      data.value = json;
      loading.value = false;
    });

  return { data, loading };
}

返回响应式状态和方法

  • 通常返回 ref、reactive 或 computed 状态以及操作它们的方法
ts 复制代码
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  const decrement = () => count.value--;

  return { count, increment, decrement };
}

易于测试

  • 将业务逻辑从组件中抽离到 Hook 中,可以更方便地进行单元测试。
ts 复制代码
// useCounter.test.ts
test('increments counter', () => {
  const { count, increment } = useCounter();
  increment();
  expect(count.value).toBe(1);
});

合理使用生命周期钩子

  • 在 Hook 中合理使用 onMounted、onUnmounted 等生命周期钩子,用于管理副作用
ts 复制代码
function useEventListener(target, event, handler) {
  onMounted(() => {
    target.addEventListener(event, handler);
  });

  onUnmounted(() => {
    target.removeEventListener(event, handler);
  });
}

模块化组织

  • 将多个相关 Hook 组织成模块或工具包,便于管理和导入。
bash 复制代码
/hooks
  ├── useCounter.ts
  ├── useFetch.ts
  └── useFormValidation.ts

类型安全(TypeScript)

  • 如果项目使用 TypeScript,务必为 Hook 添加类型定义,提高可维护性和 IDE 支持
ts 复制代码
interface UseFetchReturn<T> {
  data: Ref<T | null>;
  loading: Ref<boolean>;
  error: Ref<Error | null>;
}

function useFetch<T>(url: string): UseFetchReturn<T> {
  // ...
}

避免副作用污染

  • 不要在 Hook 中直接修改全局状态或执行副作用,应通过返回值让组件自行处理。

结合 UI 层使用

Hook 只负责数据逻辑,UI 层使用其返回值驱动视图

ts 复制代码
<script setup>
import { useCounter } from '@/hooks/useCounter'

const { count, increment } = useCounter()
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

hooks 中使用 onMounted 等生命周期的优缺点

✅ 正确性没问题:

在组件挂载时自动发起请求,符合业务逻辑。 代码简洁,易于理解。

❌ 存在的问题:

问题 说明
1. 职责不清晰 Hook 应该只负责封装逻辑,而不应隐式地绑定生命周期行为。这会让调用者不清楚内部副作用是如何触发的。
2. 可测试性差 自动执行 onMounted 会增加单元测试的复杂度,因为你需要模拟 Vue 生命周期才能测试其行为。
3. 灵活性受限 如果组件希望手动控制请求时机(例如:根据用户输入再加载),自动触发就变得不合适。
4. 复用性降低 其他组件如果想复用这个 Hook,但不想在 onMounted 时加载数据,就不得不绕过或重写这部分逻辑。
相关推荐
前端工作日常22 分钟前
前端基建的幸存者偏差
前端·vue.js·前端框架
cypking3 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo6173 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Watermelo6173 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
VillenK4 小时前
vban2.0中table的使用—action封装
前端·vue.js
VillenK4 小时前
vban2.0中table的使用
前端·vue.js
Dolphin_海豚4 小时前
vapor 中的 ast 是如何被 transform 到 IR 的
前端·vue.js·源码
袋鱼不重5 小时前
Vue3 Effect源码解析
前端·javascript·vue.js
拾光拾趣录5 小时前
Vue 双向数据绑定原理
前端·vue.js
90后的晨仔6 小时前
vue中的watch 可以监听对象吗?
前端·vue.js