如何在Vue3中使用Hooks

在Vue的options Api时代，mixins是我们抽离一个功能的重要手段，而在使用composition Api的Vue3时代，我们可以用hooks来实现类似mixins的功能。
相比mixins，hooks更清楚复用功能代码的来源, 更清晰易懂。
下面来了解一下hooks的用法~~

首先，在src中创建一个hooks文件夹，来统一管理项目中的hooks功能

在hooks文件夹中新建一个文件useMousePosition.ts，这个hooks实现的功能是点击页面时，记录鼠标当前的位置

// 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.pageXy.value = e.pageY}onMounted(() => {document.addEventListener('click', updateMouse)})onUnmounted(() => {document.removeEventListener('click', updateMouse)})return { x, y }
}export default useMousePosition

最后，我们在需要用到该hooks的组件中引入使用

<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中使用router
如何在Vue3中使用router //在vue的js或ts文件中引入vue-router的方法 import {createWebHashHistory,createRouter} from 'vue ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
如何在vue3中优雅地使用v-model？
文章目录 ps:vue3中推荐使用的是reactive写法,文中这种格式只是为了和vue2做对照,只是为了凸显vue3中对v-model的改进,仅供参考. Vue中的数据绑定 v-bind v-bin ...
Vue--》如何在Vue3中书写TSX
在vue2的时候就已经可以使用 jsx 语法,但是不是很友好,写起来是一件很痛苦的事情,所以你很少见到有人会在vue2中书写 jsx 语法,官方也不建议我们在vue2中进行书写 jsx 的代码风格: ...
Vue3 中使用 AudioWorklet 获取麦克风音量
Vue3 中使用 AudioWorklet 获取麦克风音量最近公司在开发音视频项目,其中有个功能是用户监测麦克风讲话是否有波动:于是从各种技术网站想找关于Vue3的示例项目想着借鉴一番,但是功夫不负 ...
如何在React中使用功能组件
Have you wondered how to create a component in React? 您是否想过如何在React中创建组件? To answer, it is as simple ...
如何在Mongoose中更新/更新文档？
本文翻译自:How do I update/upsert a document in Mongoose? Perhaps it's the time, perhaps it's me drowning ...
在vue3中使用jsx语法
背景 vue3项目中推进使用composition-api + setup 形式配合jsx+hooks形式,按业务分离,逻辑更清晰,维护更方便: 语法下面主要通过对比jsx和template不同 ...
Vue3 生命周期Hooks函数与调度器Scheduler的原理
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群写在最前:本文章的目标 Vue3的生命周期的实现原理是比较简单的,但要理解整个Vue3的生命 ...

如何在Vue3中使用Hooks

如何在Vue3中使用Hooks相关推荐

最新文章

热门文章