vue3-HOOKS模块化处理方式
作者：Better柏特
这篇文章主要介绍了vue3-HOOKS模块化处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3模块化处理
vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去
eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用
可以在src目录下，新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里)，
然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯，代表是一个抽离出来的模块
import { ref } from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {
const now = new Date();
const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
const minu =
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
const sec =
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
nowTime.value = hour + ":" + minu + ":" + sec;
setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime }注意:需要将定义的变量nowTime和方法getNowTime通过export导出
- 使用的时候跟在setup中定义的变量和方法一样使用
- 使用模块化封装一个远程调用接口的组件
建立useURLAxios.js文件
在文件中定义远程加载需要的 变量和axios请求
import {ref} from 'vue'
import axios from 'axios';
function usURLAxios(url) {
const result = ref(null)
const loading = ref(true)
const loaded =ref(false)
const error =ref(null)
axios.get(url).then((res)=>{
loading.value = false
loaded.value = true
result.value = res.data
}).catch(e=>{
error.value = e
loading.value = false
})
return {
result,
loading,
loaded,
error
}
}
export default usURLAxios使用时
新增一个.vue文件
<template> <div> <button @click="getImg">随机展示图片</button> <div v-if="thisloading">Loading.....</div> <img v-if="thisloaded" :src="thisresult.message" /> <div></div> </div> </template>
<script>
import { reactive, toRefs } from "vue";
import useUrlAxios from "../hooks/useURLAxios";
export default {
setup() {
const data = reactive({
thisresult: null,
thisloading: true,
thisloaded: false,
getImg: () => {
const { result, loading, loaded } = useUrlAxios(
"https://dog.ceo/api/breeds/image/random"
);
data.thisresult = result;
data.thisloading = loading;
data.thisloaded = loaded;
console.log(
22222,
data.thisresult,
data.thisloading,
data.thisloaded,
result,
loaded,
loading
);
},
});
const refData = toRefs(data);
return { ...refData };
},
};
</script>
<style lang="scss" scoped>
</style>vue hooks理解与使用
vue的hooks和mixins功能相似，但又比mixins具有以下几个优势：
- 允许hooks间相互传递值
- 组件之间重用状态逻辑
- 明确指出逻辑来自哪里
demo源码示意
hook1：
import { useData, useMounted } from 'vue-hooks';
export function windowwidth() {
const data = useData({
width: 0
})
useMounted(() => {
data.width = window.innerWidth
})
// this is something we can consume with the other hook
return {
data
}
}
import { useData, useMounted } from 'vue-hooks';
export function windowwidth() {
const data = useData({
width: 0
})
useMounted(() => {
data.width = window.innerWidth
})
// this is something we can consume with the other hook
return {
data
}
}
hook2:
// the data comes from the other hook
export function logolettering(data) {
useMounted(function () {
// this is the width that we stored in data from the previous hook
if (data.data.width > 1200) {
// we can use refs if they are called in the useMounted hook
const logoname = this.$refs.logoname;
Splitting({ target: logoname, by: "chars" });
TweenMax.staggerFromTo(".char", 5,
{
opacity: 0,
transformOrigin: "50% 50% -30px",
cycle: {
color: ["red", "purple", "teal"],
rotationY(i) {
return i * 50
}
}
},
...
在组件内部，我们可以将 hook1 作为参数传递给 hook2：
<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";
export default {
hooks() {
logolettering(windowwidth());
}
};
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。