vue3-HOOKS模塊化處理方式

更新時間：2022年04月18日 10:42:04 作者：Better柏特

這篇文章主要介紹了vue3-HOOKS模塊化處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3模塊化處理

vue3版本的更新,就是能搞更好的重用機(jī)制,可以把想要得模塊獨立出去

eg:顯示一個當(dāng)前時間的工能,在多個頁面需要調(diào)用的時候不用重復(fù)的調(diào)用

可以在src目錄下，新建一個文件夾hooks(所有抽離出來的功能模塊都可以放到這個文件夾里)，

然后再新建一個文件useNowTime.js,這里使用use開頭是一個使用習(xí)慣，代表是一個抽離出來的模塊

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導(dǎo)出

使用的時候跟在setup中定義的變量和方法一樣使用
使用模塊化封裝一個遠(yuǎn)程調(diào)用接口的組件

建立useURLAxios.js文件

在文件中定義遠(yuǎn)程加載需要的變量和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">隨機(jī)展示圖片</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具有以下幾個優(yōu)勢：

允許hooks間相互傳遞值
組件之間重用狀態(tài)邏輯
明確指出邏輯來自哪里

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
            }
          }
        },
        ...

在組件內(nèi)部，我們可以將 hook1 作為參數(shù)傳遞給 hook2：

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";
?
export default {
? hooks() {
? ? logolettering(windowwidth());
? }
};
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: