vue3的hooks用法总结

更新时间：2023年04月19日 15:29:05 作者：一只爱吃糖的小羊

vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，这篇文章主要介绍了一文掌握vue3中hooks的介绍及用法,需要的朋友可以参考下

vue3的hooks总结

vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。下面我们总结一下如何去书写hooks。
首先应该先建立一个hooks文件夹：其目的是为了存放hook文件。

在这里插入图片描述

建立相关的hook文件：一般使用use开头。

一、计数器的hook

在这里插入图片描述

useTitle的hooks

useScrollPostion用来监测浏览器页面的滚动情况

在这里插入图片描述

useMousemove监听鼠标位置的hook

在这里插入图片描述

useLocalStorage可以本地存储

在这里插入图片描述

vue3中hooks的介绍及用法小结

大家好，今天这篇文章是介绍一下vue3中的hooks以及它的用法。本文内容主要有以下两点：

什么是hooks
vue3中hooks的使用方法

一、什么是hooks

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

二、hooks的用法

1.在src中创建一个hooks文件夹，用来存放hook文件

2.根据需要写hook文件，比如要实现一个功能就是在点击页面时，记录鼠标当前的位置，可以在hooks文件夹中新建一个文件useMousePosition.ts，

// src/hooks/useMousePosition.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue'

interface MousePosition {
  x: Ref<number>,
  y: Ref<number>
}
function useMousePosition(): MousePosition {
  const x = ref(0)
  const y = ref(0)

  const updateMouse = (e: MouseEvent) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    document.addEventListener('click', updateMouse)
  })

  onUnmounted(() => {
    document.removeEventListener('click', updateMouse)
  })

  return { x, y }
}

export default useMousePosition

3.hook文件的使用：在需要用到该hook功能的组件中的使用，比如在 test.vue文件中：

// src/views/test.vue
<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'
// 引入hooks
import useMousePosition from '../../hooks/useMousePosition'
export default defineComponent({
  setup () {
    // 使用hooks功能
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
})
</script>

以上就是vue3中hooks的使用，是不是觉得特别的简单清晰。

到此这篇关于一文掌握vue3中hooks的介绍及用法的文章就介绍到这了,更多相关vue3 hooks用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目如何实现Echarts在label中获取点击事件
这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue组件中的数据传递方法
这篇文章主要介绍了vue组件中的数据传递方法,非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05
Vue页面生成PDF的最佳方法推荐
公众中经常会有这种场景,一些合同、协议等的页面需要进行下载,而且需要和页面保持一致,下面这篇文章主要给大家介绍了关于Vue页面生成PDF的最佳方法,需要的朋友可以参考下
2022-05-05
基于Vue3实现点击Tab平滑滚动并吸顶效果的完整代码
在现代 Web 应用开发中,良好的用户体验至关重要,本文将深入剖析一个常见的交互需求：点击页面 Tab 栏时,页面平滑滚动至该 Tab 区域,并使其吸附在顶部导航栏下方的效果,需要的朋友可以参考下
2026-02-02
Vue+Ant Design进行大数据量下拉框卡顿与表单提交优化
在现代前端开发中,处理大数据量渲染和表单交互是常见的挑战,本文将探讨如何优化 Ant Design Vue 下拉框在大数据量情况下的性能问题,并解决表单提交后重复提示的问题,需要的可以了解下
2025-03-03
vue.js实现备忘录demo
这篇文章主要为大家详细介绍了vue.js实现备忘录的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
如何将HTML页面改写到vue项目中详解
html和vue都是前端技术中非常重要的一部分,其中html是web开发的基石,而vue则是现代化的前端开发框架之一,下面这篇文章主要给大家介绍了关于如何将HTML页面改写到vue项目中的相关资料,需要的朋友可以参考下
2024-08-08
vue-better-scroll 的使用实例代码详解
这篇文章主要介绍了vue-better-scroll 的使用实例代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
Vue3中reactive变量重新赋值无法响应的3种处理方法
这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下
2023-08-08
VUE使用localstorage和sessionstorage实现登录示例详解
这篇文章主要为大家介绍了VUE使用localstorage和sessionstorage实现登录示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08