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基于electron构建第一个程序过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue接入下载文件接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了手写Vue弹窗Modal的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Vue.filter函数用于注册一个全局的过滤器,该过滤器可以在模板和组件中使用,这篇文章主要介绍了vue filter的几种用法示例小结,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue 全选组件封装,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要给大家介绍了关于Vue父子之间值传递的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
最近有一个项目需要用到地图来展示位置并进行数据交互,用vue-baidu-map实现出来,下面这篇文章主要给大家介绍了关于Vue中Vue-Baidu-Map基本使用的相关资料,需要的朋友可以参考下2023-03-03
导入导出excel这是前端做管理系统最常用的功能了,下面这篇文章主要给大家介绍了基于Vue实现Excel解析与导出功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue SSR 组件加载问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
最新评论