脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中computed和watch的区别

    一文搞懂Vue中computed和watch的区别

    这篇文章主要和大家详细介绍一下Vue中computed和watch的使用与区别，文中通过示例为大家进行了详细讲解，对Vue感兴趣的同学，可以学习一下
    2022-11-11
  • 详解Vscode中使用Eslint终极配置大全

    详解Vscode中使用Eslint终极配置大全

    这篇文章主要介绍了详解Vscode中使用Eslint终极配置大全，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue.js实现日历功能

    Vue.js实现日历功能

    这篇文章主要为大家详细介绍了Vue.js实现日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解Vue.js v-for不支持IE9的解决方法

    详解Vue.js v-for不支持IE9的解决方法

    这篇文章主要介绍了详解Vue.js v-for不支持IE9的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue+vant使用图片预览功能ImagePreview的问题解决

    vue+vant使用图片预览功能ImagePreview的问题解决

    这篇文章主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue3+antDesignVue实现表单校验的方法

    Vue3+antDesignVue实现表单校验的方法

    这篇文章主要为大家详细介绍了基于Vue3和antDesignVue实现表单校验的方法,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解下
    2024-01-01
  • Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

    Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

    这篇文章主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue实现可移动的悬浮按钮

    vue实现可移动的悬浮按钮

    这篇文章主要为大家详细介绍了vue实现可移动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Vuejs第十二篇之动态组件全面解析

    Vuejs第十二篇之动态组件全面解析

    组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。接下来通过本文给大家介绍Vuejs第十二篇之动态组件，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-09-09
  • vue Keep-alive组件缓存的简单使用代码

    vue Keep-alive组件缓存的简单使用代码

    keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,下面这篇文章主要给大家介绍了关于vue Keep-alive组件缓存的简单使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论