脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 Hooks

Vue3中Hooks函数的使用及封装思想详解

 更新时间：2023年06月18日 14:49:03   作者：奥特曼  
Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式，简单来说，就是将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用，下面小编就来和大家聊聊Hooks函数的使用及封装思想吧

一. 什么是hooks函数

专业解释：Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。

大白话：将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用。

在尤大大开发Vue3  Composition API 主要考虑了以下两点 :

对Vue社区调研，了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。

对React Hooks和其他前端框架的解决方案进行了学习和借鉴。

有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。

二、如何封装一个hooks函数

例如实现一个点击按钮获取body的宽度和高度

<script setup lang="ts">
import { reactive } from "vue";
const data = reactive({
  width: 0,
  height:0
})
const getViewportSize = () => {
  data.width = document.body.clientWidth;
  data.height = document.body.clientHeight;
}
</script>
<template>
  <button @click="getViewportSize" > 获取窗口大小 </button>
    <div>
      <div>宽度 ： {{data.width}}</div>
      <div>宽度 ： {{data.height}}</div>
    </div>
</template>

抽离逻辑，封装成hooks函数

hooks封装规范：

1. 新建hooks文件；

2. 函数名前缀加上use；

3. 合理利用Vue提供的响应式函数及生命周期；

4. 暴露出 变量 和 方法 提供外部需要时使用；

src/hooks/index.js

import { reactive } from "vue";
export function useVwSize() {
  const data = reactive({
    width: 0,
    height:0
  })
  const getViewportSize = () => {
    data.width = document.body.clientWidth;
    data.height = document.body.clientHeight;
  }
  return {
    data,getViewportSize
  }
}

index.vue 使用hooks

<script setup lang="ts">
import { useVwSize } from "@/hooks";
const { data, getViewportSize } = useVwSize();
</script>
<template>
  <button @click="getViewportSize">获取窗口大小</button>
  <div>
    <div>宽度 ： {{ data.width }}</div>
    <div>宽度 ： {{ data.height }}</div>
  </div>
</template>

三、Hooks 常用 Demo

（1）验证码倒计时

 /**
 *  倒计时
 *  @param {Number} second 倒计时秒数
 *  @return {Number} count 倒计时秒数
 *  @return {Function} countDown 倒计时函数
 *  @example
 *  const { count, countDown } = useCountDown()
 *  countDown(60)
 * <div>{{ count }}</div>
 */
export function useCountDown() {
  const count = ref(0);
  const timer = ref(null);
  const countDown = (second, ck) => {
    if (count.value === 0 && timer.value === null) {
      ck();
      count.value = second;
      timer.value = setInterval(() => {
        count.value--;
        if (count.value === 0) clearInterval(timer.value);
      }, 1000);
    }
  };
  onBeforeMount(() => {
    timer.value && clearInterval(timer.value);
  });
  return {
    count,
    countDown,
  };
}
<script setup lang="ts">
import {useCountDown} from "@/hooks";
// 倒计时
const { count, countDown } = useCountDown();
const sendCode = () => {
  console.log("发送验证码");
};
</script>
 <button :disabled="count!=0" @click="countDown(5,sendCode)">倒计时 {{ count || '' }} </button>

（2）防抖

/**
 * @params {Function} fn  需要防抖的函数 delay 防抖时间
 * @returns {Function} debounce 防抖函数
 * @example  
 * const { debounce } = useDebounce()
 * const fn = () => { console.log('防抖') }
 * const debounceFn = debounce(fn, 1000)
 * debounceFn()
 * 
 */
export function useDebounce() {
  const debounce = (fn, delay) => {
    let timer = null;
    return function () {
      if (timer)  clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    };
  };
  return { debounce };
}
<script setup lang="ts">
import { useDebounce } from "@/hooks";
// 防抖
const { debounce } = useDebounce()
const fn = () => {
   console.log('点击了哈');
}
const debounceClick =  debounce(fn,1000)
<button @click="debounceClick">防抖点击</button>
</script>

（3）节流

/**
 * @params {Function} fn  需要节流的函数 delay 节流时间
 * @returns {Function} throttle 节流函数
 * @example
 * const { throttle } = useThrottle()
 * const fn = () => { console.log('节流') }
 * const throttleFn = throttle(fn, 1000)
 * throttleFn()
 *  
 * 
 *  */
export function useThrottle() {
  const throttle = (fn, delay) => {
    let timer = null;
    return function () {
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  };
  return { throttle };
}
<script setup lang="ts">
import { useThrottle} from "@/hooks";
const fn = () => {
   console.log('点击了哈');
}
const { throttle } = useThrottle()
const throttleClick =  throttle(fn,1000)
</script>
 <button @click="throttleClick">节流点击</button>

以上就是Vue3中Hooks函数的使用及封装思想详解的详细内容，更多关于Vue3 Hooks的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue.js使用this.$confirm换行显示提示信息实例

    Vue.js使用this.$confirm换行显示提示信息实例

    在编写Web应用时,实现多行文本显示通常需要用到HTML标签或JavaScript特定函数,本文介绍了如何使用JavaScript的$createElement函数来创建多行文本显示,$createElement可以创建任何HTML标签,使得在JavaScript中控制HTML输出更加灵活,通过简单的代码示例
    2024-10-10
  • vue代理如何配置重写方法(pathRewrite与rewrite)

    vue代理如何配置重写方法(pathRewrite与rewrite)

    这篇文章主要介绍了vue代理如何配置重写方法(pathRewrite与rewrite),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Nuxt3重点特性使用举例问题记录

    Nuxt3重点特性使用举例问题记录

    Nuxt3 使用 Vue.js 作为视图引擎，Nuxt3 中提供了所有 Vue 3 功能，所以我们创建的Nuxt项目其实也是vue3项目，这篇文章主要介绍了Nuxt3重点特性使用举例记录,需要的朋友可以参考下
    2022-12-12
  • vuex如何重置所有state(可定制)

    vuex如何重置所有state(可定制)

    在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么如何重置呢，下面就跟随小编一起来了解一下
    2019-01-01
  • 在 Vue 中控制表单输入方法详解

    在 Vue 中控制表单输入方法详解

    这篇文章主要介绍了在 Vue 中控制表单输入方法详解的相关资料,需要的朋友可以参考下
    2023-04-04
  • 解决vue net :ERR_CONNECTION_REFUSED报错问题

    解决vue net :ERR_CONNECTION_REFUSED报错问题

    这篇文章主要介绍了解决vue net :ERR_CONNECTION_REFUSED报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue中引入echarts的步骤及折线图、柱状图常见配置项

    Vue中引入echarts的步骤及折线图、柱状图常见配置项

    这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下
    2023-11-11
  • Vue3实现滚动条自动滚动到底部

    Vue3实现滚动条自动滚动到底部

    在Vue中,通过ref和watch结合nextTick实现滚动区域自动滚动到底部,并添加返回顶部按钮,适用于动态内容场景,供开发者参考
    2025-08-08
  • vue el-table设置selection选中状态实现方式

    vue el-table设置selection选中状态实现方式

    在Vue使用Element UI的el-table组件时,toggleRowSelection方法用于切换行的选中状态,关键代码通常涉及调用该方法并传入行数据和选中状态（true或false）,以实现行的选中或取消选中
    2025-12-12
  • vue生命周期与钩子函数简单示例

    vue生命周期与钩子函数简单示例

    这篇文章主要介绍了vue生命周期与钩子函数,结合简单实例形式分析了vue.js生命周期及钩子函数相关流程与实现技巧,需要的朋友可以参考下
    2019-03-03

最新评论