vue3中hooks的概述及用法小结

目录
  • 一、 什么是hooks
  • 二、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用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3项目中的hooks的使用教程

    Vue3项目中的hooks的使用教程

    目录 hooks 特点 hooks 基本使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,就算没用过也一定了解过,也就是混入,通过 mixin 混入来分发 vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项.而 vue2 的 hooks 函数与 mixin 混入的区别,

  • Vue3通过ref操作Dom元素及hooks的使用方法

    Vue3 ref获取DOM元素 <div ref="divBox">Hello</div> import {ref,onMounted} from 'vue' setup() { const divBox = ref(null); onMounted(()=>{ console.log(divBox.value); }) return{divBox} } 父组件监听子组件中的元素 在父组件中的子组件里会打印一个proxy(实例),通过实例去获取里面的属性或

  • Vue3使用hooks函数实现代码复用详解

    Vue3使用hooks函数实现代码复用详解

    目录 前言 VUE2我们是怎么做的呢? VUE3中我们怎么处理复用代码逻辑的封装呢? 说那么多,不如直接上代码来看差异 前言 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现代码复用 弊端一: 会涉及到覆盖的问题 组件的data.methods.filte

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • vue3在自定义hooks中使用useRouter报错的解决方案

    目录 自定义hooks中使用useRouter报错 useRouter useRoute 使用Vue.use()报错“Cannot read property ‘use‘ of undefined” 原因 正解 自定义hooks中使用useRouter报错 随着vue3的更新,vue-router也更新到了4.x useRouter 相当于vue2的this.$router全局的路由实例,是router构造方法的实例 useRoute 相当于vue2的this.$route表示当前激活的路由的状

  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • Shell脚本中$符号的几种用法小结

    Shell脚本中$符号的几种用法小结

    目录 Shell脚本中$符号的几种用法 1.1 引用变量 1.2 引用脚本或函数参数 1.3 上条命令的返回值 1.4 执行并获取命令输出 1.5 表达式求值 1.6 获取当前进程 ID 1.7 后台运行的最后一个进程 ID 1.8 获取 Shell 选项 shell中$(( )).$( ).``与${ }的区别 (1)$( )与｀｀(反引号):返回括号中命令的结果 (2)${ }变量替换 最近在学习Shell,发现还有一些知识点需要巩固,这里写出来,加深下印象. 通常情况下,在工作中用的最多的

  • VUE3中watch和watchEffect的用法详解

    watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

  • 一文带你了解Vue3中toRef和toRefs的用法

    toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据 通俗易懂的理解: <template> <h3>姓名:{{ person.name }}</h3> <h3>年龄:{{ person.age }}</h3> <h3>薪资:{{ person.job.j1.salary }}</h3> <button @click="person.name += '!'">修改姓名&l

  • C++中的string类的用法小结

    相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯定的.也许有人会说,即使不用MFC框架,也可以想办法使用MFC中的API,具体的操作方法在本文最后给出操作方法.其实,可能很多人很可能会忽略掉标准C++中string类的使用.标准C++中提供的string类得功能也是非常强大的,一般都能满足我们开发项目时使用.现将具体用法的一部分罗列如下,只起一个

  • js中call与apply的用法小结

    js中call与apply的用法小结

    前天去面试,有个gg问了一些js知识,其中有一道call与apply用法的题目,尽管在365天前用过call方法,但当时还是没能答上来,今天深入总结一下 call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,- ] );       // 参数列表,arg1,arg2,...apply(thisArg [,argArray] );                 // 参数数组,argArray 上面两个

  • Jquery中$.post和$.ajax的用法小结

    Jquery的$.ajax的用法: jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml").错误

  • PHP中set error handler函数用法小结

    set_error_handler() 函数设置用户自定义的错误处理函数.该函数用于创建运行时期间的用户自己的错误处理方法.该函数会返回旧的错误处理程序,若失败,则返回 null. 下面来看一些例子. set_error_handler() PHP从4.1.0开始提供了自定义错误处理句柄的功能函数set_error_handler(),但很少数脚本编写者知道.set_error_handler这个函数可以很好地防止错误路径泄露,当然还有其它更多的作用. 1.可以用来屏蔽错误. 出现错误一来会把一

  • Laravel中10个有用的用法小结

    前言 本文给大家介绍了Laravel 中一些常用的用法,额,说不定你就用上了... 1. 在 find 方法中指定属性 User::find(1, ['name', 'email']); User::findOrFail(1, ['name', 'email']); 2. Clone 一个 Model 用 replicate 方法可以克隆一个 Model $user = User::find(1); $newUser = $user->replicate(); $newUser->save()

  • javascript中的self和this用法小结

    一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 代码如下:var Class = {     create: function() {         return function() {             this.initialize.apply(this , arguments);         }     }

随机推荐