点赞 点赞 15
评论 0
书签 书签 17

Vue3 Hooks 定义与使用详解

原创 已于 2025-04-28 19:05:14 修改 · 3.4k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
cknow-ai 代码可运行
于 2025-04-28 06:58:24 首次发布

在 Vue 3 中，Hooks 是通过组合式 API（Composition API）实现的逻辑复用机制。它们允许将组件的响应式状态和生命周期逻辑封装到可复用的函数中。以下是 Vue 3 Hooks 的核心概念和用法详解：

1. 什么是 Hooks？

  • Hooks 是函数，以 use 开头命名（约定），例如 useFetch、useMouse。

  • 内部使用 Vue 的响应式 API（如 ref、reactive）和生命周期钩子（如 onMounted、onUnmounted）。

  • 在组件的 setup() 函数中调用，实现逻辑复用。

2. 基础 Hook 示例

示例 1: 获取鼠标位置

javascript

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  const update = (e) => {
    x.value = e.clientX;
    y.value = e.clientY;
  };

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}
在组件中使用：

vue

<script setup>
import { useMousePosition } from './useMousePosition';

const { x, y } = useMousePosition();
</script>

<template>
  <div>鼠标位置：{{ x }}, {{ y }}</div>
</template>

3. 生命周期钩子的使用

  • 在 Hook 中直接调用生命周期函数（如 onMounted），它们会在调用组件的对应生命周期时触发。

  • 执行顺序：多个 Hook 中的同名生命周期按调用顺序执行。

4. 异步逻辑处理

示例 2: 数据请求 Hook

javascript

// useFetch.js
import { ref, onUnmounted } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(false);

  let controller = new AbortController(); // 用于取消请求

  const fetchData = async () => {
    loading.value = true;
    try {
      const response = await fetch(url, { signal: controller.signal });
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  onUnmounted(() => controller.abort()); // 组件卸载时取消请求

  fetchData(); // 自动执行

  return { data, error, loading, retry: fetchData };
}
在组件中使用：

vue

<script setup>
import { useFetch } from './useFetch';

const { data, error, loading } = useFetch('https://api.example.com/data');
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">错误：{{ error.message }}</div>
  <div v-else>{{ data }}</div>
</template>

5. 响应式状态管理

  • ref vs reactive：

    • 使用 ref 处理基本类型（如数字、字符串）或对象引用。

    • 使用 reactive 处理复杂对象（如嵌套数据）。

  • 返回响应式对象：Hook 可以返回 ref、reactive 或计算属性。

6. 组合多个 Hooks

Hooks 可以嵌套调用，形成更复杂的逻辑：

javascript

// useUserData.js
import { useFetch } from './useFetch';
import { computed } from 'vue';

export function useUserData(userId) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
  const isAdmin = computed(() => user.value?.role === 'admin');

  return { user, loading, error, isAdmin };
}

7. 与 React Hooks 的区别

  • 依赖追踪：Vue 自动追踪响应式依赖，无需手动指定依赖数组。

  • 生命周期绑定：直接调用 onMounted 等函数，无需像 React 的 useEffect 处理清理逻辑。

8. 最佳实践

  1. 命名规范：以 use 开头，明确用途（如 useDarkMode）。

  2. 单一职责：每个 Hook 只处理一个功能。

  3. 清理副作用：在 onUnmounted 中移除事件监听器、取消请求等。

  4. 类型安全：使用 TypeScript 增强代码健壮性。

总结

Vue 3 的 Hooks 通过组合式 API 提供了一种灵活、高效的逻辑复用方式。通过封装响应式状态和生命周期逻辑，代码可维护性和可读性显著提升。核心步骤包括：

  1. 创建以 use 开头的函数。

  2. 使用 ref/reactive 管理状态。

  3. 使用生命周期钩子处理副作用。

  4. 返回需要暴露的状态或方法供组件使用。

在 Vue 3 的 Composition API 中，Hooks 完全可以使用箭头函数。箭头函数和普通函数在 Vue 3 的 Hooks 中本质上是等价的，但需要注意 上下文（this） 和 响应式 API 的使用规范。以下是详细解答：

1. 箭头函数定义 Hooks

Hooks 可以定义为箭头函数，但需要遵循以下规则：

示例：箭头函数定义 Hook

javascript

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

// 使用箭头函数定义 Hook
export const useCounter = (initialValue = 0) => {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  return { count, increment };
};
在组件中使用：

vue

<script setup>
import { useCounter } from "./useCounter";

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

<template>
  <button @click="increment">计数：{{ count }}</button>
</template>

2. 为什么箭头函数是可行的？

  • 无 this 绑定问题：
    Vue 3 的 Composition API 设计为无 this 上下文的模式（尤其在 setup 中），因此箭头函数不会导致 this 指向问题。

  • 直接使用响应式 API：
    在 Hook 中，响应式状态（如 ref、reactive）和生命周期钩子（如 onMounted）直接通过函数作用域访问，无需依赖 this。

3. 注意事项

(1) 生命周期钩子的注册

箭头函数中可以直接调用 onMounted、onUnmounted 等函数：

javascript

// useTimer.js
import { ref, onUnmounted } from "vue";

export const useTimer = () => {
  const seconds = ref(0);
  let timerId = null;

  const start = () => {
    timerId = setInterval(() => {
      seconds.value++;
    }, 1000);
  };

  onUnmounted(() => {
    clearInterval(timerId); // 清理副作用
  });

  return { seconds, start };
};
(2) 返回响应式对象

箭头函数需显式返回状态和方法，与普通函数一致：

javascript

// useToggle.js
import { ref } from "vue";

export const useToggle = (initialState = false) => {
  const state = ref(initialState);

  const toggle = () => {
    state.value = !state.value;
  };

  return { state, toggle }; // 返回响应式状态和方法
};

4. 箭头函数 vs 普通函数

特性箭头函数普通函数
this 绑定无自己的 this，适合无上下文的 Composition API有 this，但 Vue 3 中通常无需使用
代码简洁性更简洁（适合短逻辑）需要 function 关键字
生命周期钩子注册完全兼容完全兼容
适用场景简单逻辑、返回直接值复杂逻辑、可能需要 this 的场景（罕见）

5. 常见问题

Q：箭头函数能否访问组件实例？

  • 不能，且 不需要。
    Composition API 的设计理念是避免依赖组件实例（this），所有状态和逻辑通过函数参数或响应式 API 传递。

Q：箭头函数会影响响应式吗？

  • 不会。响应式系统的运作与函数定义方式无关，只依赖 ref、reactive 等 API 的正确使用。

6. 最佳实践

  1. 优先使用箭头函数：
    在 Hooks 中，箭头函数更简洁，且符合无 this 上下文的 Composition API 风格。

  2. 明确命名参数：
    如果 Hook 需要参数，使用显式命名（如 initialValue），避免隐式依赖。

  3. 清理副作用：
    在 onUnmounted 中清理定时器、事件监听器等，无论用哪种函数形式。

总结

Vue 3 的 Hooks 完全支持箭头函数，且在实际开发中更推荐使用，因为它：

  • 代码更简洁，符合函数式编程风格；

  • 避免潜在的 this 绑定问题；

  • 与 Composition API 的无上下文设计完美契合。

只需确保正确使用响应式 API（ref/reactive）和生命周期钩子即可。

以下是一个更为详细和全面的 Vue 3 组合式函数（Hooks）示例代码及分步解释，涵盖多种场景和最佳实践：

示例 1：基础 Hook（useToggle）

功能：封装一个布尔值的切换逻辑，支持默认值和自定义切换方法。

javascript

复制

下载

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

export function useToggle(initialValue = false) {
  const state = ref(initialValue);

  // 切换布尔值
  const toggle = () => {
    state.value = !state.value;
  };

  // 设置特定值
  const set = (value) => {
    state.value = value;
  };

  return {
    state,
    toggle,
    set
  };
}
在组件中使用：

vue

复制

下载

<script setup>
import { useToggle } from './useToggle';

const { state: isDarkMode, toggle: toggleDarkMode } = useToggle(true);
</script>

<template>
  <button @click="toggleDarkMode">
    {{ isDarkMode ? '☀️ Light' : '🌙 Dark' }} Mode
  </button>
</template>

分步解释：

  1. 响应式状态：使用 ref 创建一个响应式布尔值 state。

  2. 操作方法：toggle 切换状态，set 直接设置值。

  3. 返回结构：将状态和方法暴露给组件，组件通过解构获取并使用。

示例 2：副作用管理 Hook（useEventListener）

功能：封装事件监听逻辑，自动在组件卸载时清理事件。

javascript

复制

下载

// useEventListener.js
import { onMounted, onUnmounted } from 'vue';

export function useEventListener(target, event, callback) {
  // 添加事件监听
  onMounted(() => {
    target.addEventListener(event, callback);
  });

  // 清理事件监听
  onUnmounted(() => {
    target.removeEventListener(event, callback);
  });
}
在组件中使用：

vue

复制

下载

<script setup>
import { ref } from 'vue';
import { useEventListener } from './useEventListener';

const keyPressed = ref('');

useEventListener(window, 'keydown', (e) => {
  keyPressed.value = e.key;
});
</script>

<template>
  <p>Last Key Pressed: {{ keyPressed }}</p>
</template>

分步解释：

  1. 生命周期钩子：通过 onMounted 和 onUnmounted 管理事件监听的注册和清理。

  2. 通用性：通过参数 target、event、callback 实现高度复用，适用于任何 DOM 元素和事件。

  3. 副作用安全：确保组件卸载时移除监听，避免内存泄漏。

示例 3：异步数据请求 Hook（useFetch）

功能：封装数据请求逻辑，统一管理加载状态、数据和错误。

javascript

复制

下载

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

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  const fetchData = async () => {
    isLoading.value = true;
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Network error');
      data.value = await response.json();
      error.value = null;
    } catch (err) {
      error.value = err.message;
    } finally {
      isLoading.value = false;
    }
  };

  // 立即执行请求（可选）
  fetchData();

  return {
    data,
    error,
    isLoading,
    retry: fetchData // 允许手动重试
  };
}
在组件中使用：

vue

复制

下载

<script setup>
import { useFetch } from './useFetch';

const { data: posts, isLoading, error } = useFetch('https://api.example.com/posts');
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

分步解释：

  1. 状态管理：通过 ref 管理 data、error 和 isLoading 状态。

  2. 异步逻辑：在 fetchData 中处理 API 请求，捕获可能的错误。

  3. 自动执行：Hook 被调用时立即发起请求（可根据需求调整）。

  4. 手动重试：返回 retry 方法供组件手动重新加载数据。

示例 4：组合多个 Hooks（useUserActivity）

功能：组合鼠标位置和键盘事件，跟踪用户活动状态。

javascript

复制

下载

// useUserActivity.js
import { ref, onMounted, onUnmounted } from 'vue';
import { useEventListener } from './useEventListener'; // 复用之前的 Hook

export function useUserActivity() {
  const lastActiveTime = ref(Date.now());
  const mousePosition = ref({ x: 0, y: 0 });

  // 监听鼠标移动
  useEventListener(window, 'mousemove', (e) => {
    mousePosition.value = { x: e.pageX, y: e.pageY };
    lastActiveTime.value = Date.now();
  });

  // 监听键盘按下
  useEventListener(window, 'keydown', () => {
    lastActiveTime.value = Date.now();
  });

  // 计算用户是否活跃（例如：5秒内无操作视为不活跃）
  const isUserActive = computed(() => {
    return Date.now() - lastActiveTime.value < 5000;
  });

  return {
    mousePosition,
    isUserActive
  };
}
在组件中使用：

vue

复制

下载

<script setup>
import { useUserActivity } from './useUserActivity';

const { mousePosition, isUserActive } = useUserActivity();
</script>

<template>
  <div :class="{ 'dimmed': !isUserActive }">
    Mouse Position: ({{ mousePosition.x }}, {{ mousePosition.y }})
  </div>
</template>

分步解释：

  1. 复用 Hooks：通过 useEventListener 减少重复代码。

  2. 复合状态：同时跟踪鼠标位置和用户最后活动时间。

  3. 计算属性：动态计算用户是否处于活跃状态。

示例 5：表单验证 Hook（useFormValidation）

功能：封装表单字段验证逻辑，支持动态规则。

javascript

复制

下载

// useFormValidation.js
import { ref, computed } from 'vue';

export function useFormValidation(fields) {
  const errors = ref({});

  // 验证单个字段
  const validateField = (name, value, rules) => {
    errors.value[name] = [];
    rules.forEach((rule) => {
      if (!rule.validator(value)) {
        errors.value[name].push(rule.message);
      }
    });
  };

  // 整体表单是否有效
  const isValid = computed(() => {
    return Object.values(errors.value).every((e) => e.length === 0);
  });

  return {
    errors,
    validateField,
    isValid
  };
}
在组件中使用：

vue

复制

下载

<script setup>
import { ref } from 'vue';
import { useFormValidation } from './useFormValidation';

const email = ref('');
const password = ref('');

// 定义验证规则
const { errors, validateField, isValid } = useFormValidation({
  email: [
    {
      validator: (v) => v.includes('@'),
      message: 'Email must contain @'
    }
  ],
  password: [
    {
      validator: (v) => v.length >= 6,
      message: 'Password must be at least 6 characters'
    }
  ]
});
</script>

<template>
  <input v-model="email" @blur="validateField('email', email, rules.email)" />
  <div v-if="errors.email">{{ errors.email.join(', ') }}</div>

  <input v-model="password" type="password" 
         @blur="validateField('password', password, rules.password)" />
  <div v-if="errors.password">{{ errors.password.join(', ') }}</div>

  <button :disabled="!isValid">Submit</button>
</template>

分步解释：

  1. 动态规则：允许为每个字段定义不同的验证规则。

  2. 响应式错误信息：通过 errors 对象收集各字段的错误提示。

  3. 表单有效性：通过 isValid 计算属性控制提交按钮状态。

组合式函数的最佳实践

  1. 单一职责
    每个 Hook 只解决一个问题（如 useFetch 专注数据请求，useEventListener 专注事件管理）。

  2. 命名清晰
    以 use 开头（如 useDarkMode），返回的对象属性名需明确（如 isLoading 而非 loading）。

  3. 参数设计
    允许灵活配置（如 useLocalStorage(key, defaultValue)）。

  4. 副作用清理
    始终在 onUnmounted 中清理定时器、事件监听等资源。

  5. 类型提示
    使用 TypeScript 增强代码可维护性（未在示例中展示，但强烈推荐）。

总结对比：何时使用 Hooks？

场景Hooks 适用性示例
需要响应式状态✅ 使用 ref/reactiveuseToggle、useFetch
涉及生命周期/副作用✅ 使用 onMounted/watchuseEventListener
跨组件复用逻辑✅ 封装为独立 HookuseUserActivity
复杂交互逻辑✅ 拆分为多个 Hooks 组合useFormValidation
纯数据处理❌ 使用普通函数计算工具函数（如 formatDate）

通过组合式函数，你可以将 Vue 组件的逻辑模块化，大幅提升代码的可读性和可维护性，同时实现高效的逻辑复用。

标签
#vue.js #javascript #前端
分类 前端开发
vue3【自定义hook】
蜗牛~~
01-27 7441
什么是hook? 本质是一个函数，把setup函数中使用的Composition API（组合式api）进行了封装 类似于vue2.x中的mixin 自定义hook的优势： 复用代码，让setup中的逻辑更清楚易懂 举个例子，通过在页面获取鼠标点击的坐标为例，来说明一下自定义hook的作用 （1）首先我们写一个这样的页面，获取鼠标点击页面的鼠标，并显示在页面上 方法：主要是通过在组件挂载时调用window.addEventListener事件监听方法获取点击事件的坐标。 demo.vue
Vue 3 Hooks（组合式API）详解
chaoxxggg的博客
08-07 938
try {});if (!response.ok) throw new Error(`HTTP错误!状态码:${response.status}`);console.error('请求错误:', err);​使用示例</script>
vue3中hooks用法详解
DZQ1223的博客
08-02 5245
hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks还真是函数的一种写法。vue3借鉴开发出了，所以也就意味着也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似，但是相对mixins而言，hooks更清楚复用功能代码的来源, 更清晰易懂。
Vue Hook 与 React Hook 全面解析：区别、用法、实战及避坑指南
最新发布
weixin_45549481的博客
04-10 396
Vue Hook 与 React Hook 核心解析 Hook 是现代前端框架中让函数组件具备状态管理和生命周期能力的核心特性。本文从五个维度系统对比了 Vue Hook 和 React Hook： 本质区别：Hook 是绑定组件上下文、能管理状态和副作用的增强函数，与普通工具函数有本质差异 设计理念：Vue 基于响应式依赖追踪更灵活，React 依赖严格调用顺序 状态管理：Vue 使用 ref/reactive 直接修改，React 必须通过 set 函数 副作用处理：Vue 提供多种专用 Hook，Re
Vue3 Hooks函数使用及封装思想
^_^
06-17 1万+
专业解释：Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话：将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用。对Vue社区调研，了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。
Vue3中的Hooks详解
fafafaz的博客
03-02 1万+
);});Vue3中的Hooks为组件开发带来了全新的编程模式和思维方式，使我们能够更好地组织和复用代码，提高代码的清晰度和可维护性。通过自定义Hooks，我们可以将组件的逻辑拆分成独立的函数，并在多个组件中共享这些逻辑。然而，Hooks的学习需要一定的时间和实践来熟悉和掌握。在使用过程中，我们应遵循Hooks的书写规范和实践最佳实践，以确保代码的质量和兼容性。
vue3中hooks的介绍及用法
热门推荐
一只爱吃糖的小羊
09-30 3万+
今天这篇文章是介绍一下vue3中的hooks以及它的用法。本文内容主要有以下两点： 什么是hooks vue3中hooks的使用方法
Vue3自定义Hooks
热爱WebGIS的博客
02-21 3969
Vue3-自定义Hooks
Vue 3 自定义 Hooks
gaotlantis的博客
06-13 1184
在 Vue 3 中，自定义 Hooks 是指使用组合式 API 创建的函数，这些函数封装了组件的可重用逻辑。通过自定义 Hooks，我们可以将状态、方法、生命周期钩子等逻辑封装在一个独立的函数中，从而在多个组件中重复使用展示数据表格是一个常见需求。loading状态、表格数据tableData、总数total和数据获取函数。我们可以通过自定义 Hooks 来实现这一需求。
Vue3 自定义Hooks完全指南
m0_37778704的博客
01-18 3992
在Vue3发布后,Composition API作为一个重要的特性,彻底改变了我们组织Vue组件代码的方式。其中,自定义Hooks的概念源自React,但Vue3对其进行了重新设计和优化,使其更加符合Vue的开发理念。本文将深入探讨Vue3中的自定义Hooks,帮助你掌握这个强大的代码复用工具。Hooks是一种特殊的函数,它可以让你在函数组件中使用状态和其他Vue特性。以"use"作为函数名称前缀返回一个包含响应式数据或方法的对象,可以使用其他Hooks,遵循组合式函数的设计模式代码组织。
深度解析:在vue3中使用自定义Hooks
九仞山的专栏
06-11 7091
详细介绍了vue3中如何使用自定义Hooks
vue3自定义hooks
weixin_46515691的博客
09-23 977
/ 数据]);// 方法try {debugger;// 返回数据和方法return {dogList,getDogList。
20 vue3之自定义hooks
qq_37550440的博客
09-26 858
Vue3 自定义Hook的作用 主要用来处理复用代码逻辑的一些封装 Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与hooks 是函数 Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数 这个在vue2 就已经有一个东西是Mixins mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。
vue3 自定义hooks
逆风优雅的博客
12-25 818
自定义 Hooks 是通过封装和复用 Vue 的响应式 API（如refreactivewatchcomputed等）和生命周期钩子（如onMounted等）来实现的一种功能模块化方案。通过自定义 Hooks，多个组件可以共享同一段逻辑，而不必重复代码。创建自定义 Hook自定义 Hook 是一个普通的函数，通常返回一个响应式的对象或者一组函数、状态，供组件使用。自定义 Hook 可以用来封装逻辑，比如处理异步请求、响应式数据、事件处理等。在组件中使用自定义 Hook。
vue3必学技能--自定义Hooks让vue3更加畅快
wangweiruning的博客
07-12 6981
vue3必学技能--自定义Hooks让vue3更加畅快
详解Vue3的自定义 Hooks
qq_44741577的博客
02-12 533
Vue 3 自定义 Hooks（组合式函数）是基于 Composition API 的核心实践，用于封装响应式逻辑并实现跨组件复用。它通过函数形式将状态、计算属性和方法封装起来，解决了 Vue 2 Mixin 的命名冲突和来源不清问题。典型应用包括状态管理（如计数器）和副作用处理（如鼠标位置追踪）。相比 Mixin，自定义 Hooks 具有更清晰的逻辑组织、更好的类型支持和无命名冲突等优势。最佳实践包括参数传递、返回对象、副作用清理和结合 TypeScript。自定义 Hooks 体现了代码分离思想，适合在
vue3的自定义hooks
Bruce__taotao的博客
01-11 2630
Vue3 的 hook函数的出现，可以让我们更好抽离重复逻辑，聚合相同的功能。它与vue2 中的mixins有点类似，但是相对 mixins 而言， hooks 函数 更清楚复用功能代码的来源,更清晰易懂。使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。1、具备可复用功能，才需要抽离为 hooks 独立文件2、函数名/文件名以 use 开头，形如: useXX3、引用时将响应式变量或者方法显式解构暴露出来；vue3 hooks 现在使用比较广泛，介绍基本概念与原理。
Vue3 自定义Hooks函数的封装
weixin_48420104的博客
05-31 2033
在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。自定义hooks通常遵循这样的命名约定：以use开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。01、具备可复用功能，才需要抽离为 hooks 独立文件02、函数名/文件名以 use 开头，形如: useXX03、引用时将响应式变量或者方法显式解构暴露出来；
vue3 中 自定义hooks
WZH15075051915的博客
04-01 1577
Hooks技术最早是由React团队的Sophie Alpert和Abramov在2018年提出来的，最初是为了解决React类组件中状态逻辑复用的问题而提出来的。在React使用类组件时，为了复用状态逻辑，需要使用高阶组件或者Render Props等方式，这些方式会增加代码的复杂度和维护成本。而Hooks技术是使用特定函数来“钩到”React的state和生命周期等特性的技术。它可以让我们在函数组件中使用state以及其他的React特性，代替传统的类组件或高阶组件等方式。
Vue3 中的 Hooks：定义、原理与实际应用场景
weixin_42597398的博客
02-18 2821
随着 Vue3 的发布，Composition API 成为了开发者们关注的焦点。Composition API 提供了一种更灵活、更强大的方式来组织和复用代码逻辑。在 Composition API 中，Hooks 是一个非常重要的概念。本文将详细介绍 Vue3 中 Hooks 的定义、原理以及实际应用场景，帮助开发者更好地理解和使用 Hooks。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值