vue3.0 hooks,vue hooks组件
这篇文章主要介绍了vue 3-挂钩模块化处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue3模块化处理某视频剪辑软件挂钩理解与使用演示源码示意
vue3模块化处理
vue3版本的更新，就是能搞更好的重用机制，可以把想要得模块独立出去
例如：显示一个当前时间的工能，在多个页面需要调用的时候不用重复的调用
可以在科学研究委员会目录下，新建一个文件夹挂钩（所有抽离出来的功能模块都可以放到这个文件夹里),
然后再新建一个文件useNowTime.js，这里使用使用开头是一个使用习惯，代表是一个抽离出来的模块
从“vue”导入{ ref }；
const now time=ref( 00:00:00 )；
const getNowTime=()={
const now=new Date()；
const hour=now.getHours() 10？现在为“0”。get hours():now。get hours()；
常量最小值=
now.getMinutes() 10？现在为“0”。get minutes():now。get minutes()；
常数秒=
now.getSeconds() 10？现在为“0”。get seconds():now。获取秒数()；
现在时间到了。value=hour : minu : sec；
setTimeout(getNowTime，1000)；
};
导出{ nowTime，getNowTime }
注意：需要将定义的变量现在和方法getNowTime通过出口导出
使用的时候跟在设置中定义的变量和方法一样使用使用模块化封装一个远程调用接口的组件建立useURLAxios.js文件
在文件中定义远程加载需要的变量和爱可信请求
从“vue”导入{ref}
从" axios "导入axios
函数高利贷(网址){
常量结果=ref(空)
const loading=ref(true)
const loaded=ref(false)
const error=ref(null)
axios.get(网址)。然后((res)={
loading.value=false
loaded.value=true
结果值=结果数据
}).catch(e={
error.value=e
loading.value=false
})
返回{
结果，
正在加载，
已加载，
错误
}
}
出口违约贷款
使用时
新增一个。某视频剪辑软件文件
模板
差异
button @click=getImg 随机展示图片/按钮
正在加载./div
img v-if= this loaded :src= this结果。消息/
分区/分区
/div
/模板
脚本
从“vue”导入{ reactive，tore fs }；
从导入useUrlAxios./hooks/useURLAxios ；
导出默认值{
setup() {
常数数据=反应({
这个结果：空
该负载：没错，
thisloaded: false，
getImg: ()={
const { result，loading，loaded }=useUrlAxios(
https://狗。 CEO/API/breedies/image/random
);
data.thisresult=result
data.thisloading=正在加载
data.thisloaded=loaded
console.log(
22222,
数据. this结果
data.thisloading，
data.thisloaded，
结果，
已加载，
装货
);
},
});
const refData=tore fs(数据)；
返回{.引用数据}；
},
};
/脚本
样式lang=scss 范围
/风格
vue hooks理解与使用
某视频剪辑软件的钩住和混入类功能相似，但又比混入类具有以下几个优势：
允许钩住间相互传递值组件之间重用状态逻辑明确指出逻辑来自哪里
demo源码示意
hook1：
从“vue挂钩”导入{ useData，use mounted }。
导出函数窗口宽度(){
const data=useData({
宽度：0
})
使用已安装的(()={
data.width=window.innerWidth
})
//这是我们可以用另一个钩子来消耗的东西
返回{
数据
}
}
从“vue挂钩”导入{ useData，use mounted }。
导出函数窗口宽度(){
const data=useData({
宽度：0
})
使用已安装的(()={
data.width=window.innerWidth
})
//这是我们可以用另一个钩子来消耗的东西
返回{
数据
}
}
hook2:
//数据来自另一个钩子
导出功能徽标字母（数据){
useMounted(function () {
//这是我们存储在前一个钩子的数据中的宽度
if (data.data.width 1200) {
//如果在使用安装钩子中调用参考文献，我们可以使用它们
const logoname=this .$ refs.logoname
拆分({ target: logoname，by: chars })；
TweenMax.staggerFromTo(.字符,5,
{
不透明度：0,
变换原点：“50% 50%-30px”，
周期：{
颜色：[红色,紫色,蓝绿色],
旋转{
返回我* 50
}
}
},
.
在组件内部，我们可以将挂钩一作为参数传递给挂钩2:
脚本
从导入{徽标字体} ././挂钩/徽标字母。js’；
从导入{窗口宽度} ././挂钩/窗宽。js’；
导出默认值{
钩子(){
徽标字体(窗口宽度())；
}
};
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。