vue3 hook,vue3.0 hook
这篇文章主要介绍了vue3的自定义钩函数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
自定义钩函数使用vue3挂钩函数示例官方示例代码-封装前使用钩住函数封装后钩住函数
自定义hook函数使用
使用Vue3的组合应用程序接口封装的可复用的功能函数自定义钩的作用类似于vue2中的混入类技术自定义钩的优势：很清楚复用功能代码的来源，更清楚易懂需求1: 收集用户鼠标点击的页面坐标这里先看一下大体项目结构：
这里的钩住下的文件是示例代码，公共内的是测试数据
在启动项目后，测试公众的的数据文件内的数据，
App.vue
模板
差异
氘自己定义钩函数操作/h2
h2x:{{x}}，y:{{y}}/h2
h3 v-if=正在加载正在加载中11./h3
H3 v-else-if=错误消息 {错误消息} }/H3
ul v-else
liid:{{data.id}}/li
里地址：{{data.address}}/li
李距离：{ {数据。距离} }/Li
/ul
！-数组数据-
ul v-for=数据中的项目：key=item.id
liid:{{item.id}}/li
lititle:{{item.title}}/li
liprice: {{item.price}}/li
/ul
/div
/模板
脚本
从“vue”导入{定义组件，观察}
从导入使用鼠标位置./hooks/useMousePosition
从导入用户请求/挂钩/用户请求
导出默认定义组件({
名称："应用程序",
//需求1:用户在页面中点击页面，把点击位置的横纵坐标收集并展示起来
setup(){
const {x，y}=useMousePosition()
//发送请求
//const {loading，data，error msg }=用户请求( data/address。JSON )//获取对象数据
const {loading，data，error msg }=用户请求(数据/产品。JSON )//获取数组数据
//监听
watch(data，()={
if(data.value){
控制台。日志(数据。价值。长度)；
}
})
返回{
x，
y，
正在加载，
数据，
错误消息
}
}
})
/脚本
src下hooks的 useMousePosition.ts
从“vue”导入{ ref，onBeforeUnmount，onMounted }
导出默认函数(){
const x=ref(-1)
const y=ref(-1)
//点击事件的回调函数
const click处理程序=(事件：鼠标事件)={
x.value=event.pageX
y。值=事件。帕克伊
}
//页面已经加载完毕了，再进行点击操作
//页面加载完毕的生命
onMounted(()={
window.addEventListener(click ，clickHandler)
})
//页面卸载之前的生命周期组合美国石油学会(美国石油协会)
onBeforeUnmount(()={
窗户。removeeventlistener( click ，clickHandler)
})
返回{
x，
y
}
}
src下hooks的 useRequest.ts
从“vue”导入{ ref }；
从" axios "导入axios
接口地址数据{
id:数字；
地址：字符串；
距离：字符串；
}
界面产品数据{
id:字符串；
标题：字符串；
价格：数量；
}
导出默认函数(网址：字符串){
//加载的状态
const loading=ref(true)
//请求成功的数据//用于数据格式替换产品数据
const data=refProductsData[] null(null)
//错误信息
const errorMsg=ref( )
//发送请求
axios.get(网址)。然后(响应={
//改变加载状态
loading.value=false
数据值=响应数据
}).接住(错误={
控制台。日志(111)；
})
返回{
正在加载，
数据，
错误消息
}
}
public下data的 address.json
{
id: 1，
地址: 陕西西安，
距离: 100米
}
public下data的 products.json
[
{
id:001 ，
标题: 华为，
价格：3000英镑
},
{
id: 002 ，
标题: 小米12,
"价格":1900年
}
]
最后查看一下整体运行展示：
vue3 hooks函数示例
以蚂蚁设计-vue 2.2.8版上传上传组件为例：
官方示例代码---封装前
模板
上传
v-model:file-list=fileList
name=file
:multiple=true
action= https://www。莫奇。io/v2/5cc 8019d 300000980 a 055 e 76
：头=头
@change=handleChange
按钮
上传-概述/上传-概述
点击上传
/a按钮
/a-上传
/模板
脚本
从“蚂蚁设计”导入{邮件}；
从" @ant-design/icons-vue "导入{上传概述}；
从“vue”导入{ defineComponent，ref }；
导出默认定义组件({
组件：{
上传概述，
},
setup() {
const handleChange=info={
if (info.file.status！==上传){
console.log(info.file，info。文件列表)；
}
if (info.file.status===done) {
消息。成功(` ${ info。文件。姓名}文件上传成功`);
} else if(info。文件。状态===错误){
消息。错误(` { info。文件。姓名}文件上传失败。`);
}
};
const文件列表=ref([])；
返回{
文件列表，
标题：{
授权：授权-文本，
},
处理更改，
};
},
});
/脚本
使用hooks函数封装后
模板
上传
v-model:file-list=fileList
name=file
:multiple=true
action= https://www。莫奇。io/v2/5cc 8019d 300000980 a 055 e 76
：头=头
@change=handleChange
按钮
上传-概述/上传-概述
点击上传
/a按钮
/a-上传
/模板
脚本
从" @ant-design/icons-vue "导入{上传概述}；
从“vue”导入{定义组件}；
//挂钩
导入使用上传自./hooks/use upload ；
导出默认定义组件({
组件：{
上传概述，
},
setup() {
/上传钩住
const { fileList，headers，handle change }=use upload()；
返回{
文件列表，
标题，
处理更改，
};
},
});
/脚本
hooks函数
从“vue”导入{ ref }；
从“蚂蚁设计”导入{邮件}；
导出默认函数useUpload() {
const handleChange=(info)={
if (info.file.status！==上传){
console.log(info.file，info。文件列表)；
}
if (info.file.status===done) {
消息。成功(` ${ info。文件。姓名}文件上传成功`);
} else if(info。文件。状态===错误){
消息。错误(` { info。文件。姓名}文件上传失败。`);
}
};
const文件列表=ref([])；
返回{
文件列表，
标题：{
授权：授权-文本，
},
处理更改，
};
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。