vue3中的hooks总结
更新时间：2022年05月30日 09:53:41 作者：卖菜的小白
这篇文章主要介绍了vue3中的hooks总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3的hooks总结
vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。下面我们总结一下如何去书写hooks。
首先应该先建立一个hooks文件夹：其目的是为了存放hook文件。
建立相关的hook文件：一般使用use开头。
计数器的hook
useTitle的hooks
useScrollPostion用来监测浏览器页面的滚动情况
useMousemove监听鼠标位置的hook
useLocalStorage可以本地存储
vue3自定义hooks
- 自定义hooks就类似组件一样只不过只封装js，当有一段js代码需要复用可以把他封装成一个hooks进行复用
- 需求，在别的页面插入一个hooks实现记录鼠标点击就的坐标
可以在文件中建一个专门写hooks的文件夹可以与 component同级
把需要复用的代码写在这个js文件中
import { reactive } from '@vue/reactivity'
import{onMounted} from 'vue'
export default function(){
let points=reactive({
x:0,
y:0
})
function myclick(event){
points.x=event.pageX
points.y=event.pageY
}
onMounted(()=>{
//点击的是窗口所以要给窗口定义点击事件
window.addEventListener("click",myclick)
})
//这里需要有一个返回值，如果不给返回值接收的是一个函数，接收的是undefind
return points
}
写完了hooks文件就可在别的地方引用了（可以跟别的代码写在一起）
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Vue.js 3 中实现网页的国际化多语言,最常用的包是 vue-i18n,通常我们会与 vue-i18n-routing 一起使用,这篇文章主要介绍了Vue3 如何接入 i18n 实现国际化多语言,需要的朋友可以参考下2024-07-07
最近简单的学习了django和drf上传文件(主要是图片),做一个记录,下面这篇文章主要给大家介绍了关于vue与django(drf)实现文件上传下载功能的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了前端设置cookie之vue-cookies使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了优化Vue中date format的性能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了vue与iframe之间的交互方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue-cli中打包图片路径错误的解决方法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
本文给大家介绍Vue3登录状态持久化方案详解包括Token 是什么的相关知识,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2026-02-02
Vue使用Print.js打印div方式(选中区域的html)
这篇文章主要介绍了Vue使用Print.js打印div方式(选中区域的html),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue pages.json页面路由中globalStyle的各个属性详解
文章总结介绍小程序页面配置属性,包括导航栏背景色（限十六进制）、标题颜色（支持white/black）、标题文字（页面级覆盖全局）、导航栏显示隐藏（default/custom）、下拉刷新设置（微信专用）及触底函数触发距离,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要为大家分享了一个非常实用的vue导航钩子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论