Vue3 Hooks函数使用及封装思想

这篇具有很好参考价值的文章主要介绍了Vue3 Hooks函数使用及封装思想。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一. 什么是hooks函数?

二、如何封装一个hooks函数

三、Hooks 常用 Demo

(1)验证码倒计时

(2)防抖

(3)节流


一. 什么是hooks函数?

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

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

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

  1. 对Vue社区调研,了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。
  2. 对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= 60 , ck = () => {}) => {
      if (count.value === 0 && timer.value === null) {
        ck();
        count.value = second;
        timer.value = setInterval(() => {
          count.value--;
          if (count.value === 0) {
            clearInterval(timer.value);
            timer.value = null
          }
        }, 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>

后面遇到不错的hooks也会持续更新哈..,也欢迎评论出你觉得不错的hooks 函数!!!

vue3hooks,vue,vue3,前端,javascript,开发语言,vue.js,vue文章来源地址https://www.toymoban.com/news/detail-668807.html

到了这里,关于Vue3 Hooks函数使用及封装思想的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3学习——hooks

    自定义hook函数 什么是hook?——本质是一个函数把setup函数中使用的Composition API进行封装。 类似于Vue2.x中的minx 自定义hook的优势:复用代码,让setup中的逻辑更清楚容易。 vue页面

    2024年02月22日
    浏览(31)
  • vue3中的hooks

    一、概念 hook 是钩子的意思, hooks 类似于封装公共方法的 js文件,实现功能的重复利用。 hooks   清楚复用功能代码的来源, 清晰易懂 hooks解决 mixin 的问题: mixins  逻辑互相嵌套,数据来源不明,且不能互相传递状态 二、hooks的命名   函数名/文件名,以use开头,形如: useXX

    2024年02月14日
    浏览(37)
  • vue3:websocket的封装与使用

    前言:vue3+pinia项目 1.引入ws 2.新建websocket.js类 3.新建一个pinia Store类 4.页面中使用

    2024年02月02日
    浏览(36)
  • 在vue3中封装使用WebSocket

    上篇文章记录了如何在日常开发过程中引入并使用websocket连接,但是在后续的开发过程中发现之前的写法有点问题,比如说多次引用连接会共用一个心跳,如果一个连接关掉了,后续其他的连接可能被一起关掉等等的bug。 所以在这篇文章里针对上篇文章提供的方法进行改进,

    2024年02月07日
    浏览(40)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(59)
  • 记录--Vue3自定义一个Hooks,实现一键换肤

    使用CSS变量, 准备两套CSS颜色 , 一套是在 light模式下的颜色,一套是在dark模式下的颜色 dark模式下的 CSS 权重要比 light 模式下的权重高 , 不然当我们给html添加自定义属性 [data-theme=\\\'dark\\\'] 的时候, dark模式权重比light低,会一直不起效果 当我们点击 dark 模式的时候, 给 html 设置自定义

    2024年02月07日
    浏览(38)
  • vue3的vue-chart组件封装(包含数据刷新按需使用)

    v-chart封装数据更新效果 初始数据展示:  刷新数据展示: v-charts Description https://v-charts.js.org/#/ npm i v-charts echarts -S / yarn add v-charts echarts -S 先别急着直接定义option对象,可以参考官网这个方法: Documentation - Apache ECharts 也就是通过实例,调用setOption这个方法,可以不通过传递

    2024年02月02日
    浏览(41)
  • vue3+vite的axios的封装与全局使用

    1.安装axios 使用npm 或 yarn 安装axios到项目中 // 使用pnpm 安装   pnpm install axios // 使用npm 安装   npm install axios // 使用yarn 安装  yarn add axios axios是一个基于Promise的HTTP请求库,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据

    2024年02月02日
    浏览(87)
  • 使用vite框架封装vue3插件,发布到npm

    目录   一、vue环境搭建 1、创建App.vue 2、修改main.ts 3、修改vite.config.ts 二、插件配置 1、创建插件 2、开发调试 3、打包配置 4、package.json文件配置 5、执行打包命令 pnpm build 6、修改index.d.ts 目录   一、vue环境搭建 1、创建App.vue 2、修改main.ts 3、修改vite.config.ts 二、插件配置

    2024年01月17日
    浏览(49)
  • vue3使用websocket简易封装,包含错误重连机制

    websocket实现的全双工通信,真真太香了,以下是笔者在使用时,自己封装的一个简易js工具。若需要源码,请移步这里 笔者这里会重连3次,重连的过程给与用户提示,3次之后会提示用户手动刷新 这里与后端约定的数据返回,加上type作为接口判断依据,因此这里不一定通用。

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包