vue3 HOOKS模块化
Better柏特 人气:0vue3模块化处理
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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容