vue3的自定義hook函數(shù)使用

更新時間：2022年04月18日 09:19:34 作者：DOM曼珠沙華

這篇文章主要介紹了vue3的自定義hook函數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

自定義hook函數(shù)使用

使用Vue3的組合API封裝的可復(fù)用的功能函數(shù)
自定義hook的作用類似于vue2中的mixin技術(shù)
自定義Hook的優(yōu)勢: 很清楚復(fù)用功能代碼的來源, 更清楚易懂
需求1: 收集用戶鼠標(biāo)點(diǎn)擊的頁面坐標(biāo)

這里先看一下大體項目結(jié)構(gòu)：

這里的hooks下的文件是示例代碼，public內(nèi)的是測試數(shù)據(jù)

在啟動項目后，測試public的data文件內(nèi)的數(shù)據(jù)，

App.vue

<template>
  <div>
    <h2>自己定義hook函數(shù)操作</h2>
    <h2>x:{{x}}, y:{{y}}</h2>
    <h3 v-if="loading">正在加載中11...</h3>
    <h3 v-else-if="errorMsg">{{errorMsg}}</h3>
    <ul v-else>
      <li>id:{{data.id}}</li>
      <li>address:{{data.address}}</li>
      <li>distance:{{data.distance}}</li>
    </ul>
 
    <!-- 數(shù)組數(shù)據(jù) -->
    <ul v-for="item in data" :key="item.id">
      <li>id:{{item.id}}</li>
      <li>title:{{item.title}}</li>
      <li>price: {{item.price}}</li>
    </ul>
  </div>
</template>

<script>
import { defineComponent, watch } from 'vue'
import useMousePosition from './hooks/useMousePosition'
import useRequest from './hooks/useRequest'
 
export default defineComponent({
  name: 'App',
  // 需求1：用戶在頁面中點(diǎn)擊頁面，把點(diǎn)擊位置的橫縱坐標(biāo)收集并展示起來
 
  setup(){
    const {x,y} = useMousePosition()
    // 發(fā)送請求
    // const {loading, data, errorMsg} = useRequest('data/address.json')   // 獲取對象數(shù)據(jù)
    const {loading, data, errorMsg} = useRequest('data/products.json')  // 獲取數(shù)組數(shù)據(jù)
    // 監(jiān)聽
    watch(data, () => {
      if(data.value){
        console.log(data.value.length);
      }
    })
    return {
      x,
      y,
      loading,
      data,
      errorMsg
    }
  }
})
</script>

src下hooks的 useMousePosition.ts

import { ref, onBeforeUnmount, onMounted } from 'vue'
export default function () {
  const x = ref(-1)
  const y = ref(-1)
  
  // 點(diǎn)擊事件的回調(diào)函數(shù)
  const clickHandler = (event:MouseEvent) => {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 頁面已經(jīng)加載完畢了，再進(jìn)行點(diǎn)擊操作
  // 頁面加載完畢的生命
  onMounted(() => {
    window.addEventListener('click',clickHandler)
  })
  // 頁面卸載之前的生命周期組合Api
  onBeforeUnmount(() => {
    window.removeEventListener('click',clickHandler)
  })
  return {
    x,
    y
  }
}

src下hooks的 useRequest.ts

import { ref } from 'vue';
import axios from 'axios';
 
 
interface AddressData{
  id: number;
  address:string;
  distance:string;
}
interface ProductsData{
  id: string;
  title:string;
  price:number;
}
 
export default function (url:string) {
  // 加載的狀態(tài)
  const loading = ref(true)
  // 請求成功的數(shù)據(jù)   // 用于數(shù)據(jù)格式替換  ProductsData
  const data = ref<ProductsData[] | null>(null)
  // 錯誤信息
  const errorMsg = ref('')
  // 發(fā)送請求
  axios.get(url).then(response => {
    // 改變加載狀態(tài)
    loading.value = false
    data.value = response.data
  }).catch(error=>{
    console.log(111);
  })
 
  return {
    loading, 
    data,
    errorMsg
  }
}

public下data的 address.json

{
  "id": 1,
  "address": "陜西西安",
  "distance": "100m"
}

public下data的 products.json

[
  {
    "id":"001",
    "title": "華為",
    "price": 3000
  },
  {
    "id": "002",
    "title": "小米12",
    "price": 1900
  }
]

最后查看一下整體運(yùn)行展示：

vue3 hooks函數(shù)示例

以ant-design-vue 2.2.8版Upload上傳組件為例：

官方示例代碼---封裝前

<template>
? <a-upload
? ? v-model:file-list="fileList"
? ? name="file"
? ? :multiple="true"
? ? action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
? ? :headers="headers"
? ? @change="handleChange"
? >
? ? <a-button>
? ? ? <upload-outlined></upload-outlined>
? ? ? Click to Upload
? ? </a-button>
? </a-upload>
</template>

<script>
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
? components: {
? ? UploadOutlined,
? },
? setup() {
? ? const handleChange = info => {
? ? ? if (info.file.status !== 'uploading') {
? ? ? ? console.log(info.file, info.fileList);
? ? ? }
? ? ? if (info.file.status === 'done') {
? ? ? ? message.success(`${info.file.name} file uploaded successfully`);
? ? ? } else if (info.file.status === 'error') {
? ? ? ? message.error(`${info.file.name} file upload failed.`);
? ? ? }
? ? };
? ? const fileList = ref([]);
? ? return {
? ? ? fileList,
? ? ? headers: {
? ? ? ? authorization: 'authorization-text',
? ? ? },
? ? ? handleChange,
? ? };
? },
});
</script>

使用hooks函數(shù)封裝后

<template>
? <a-upload
? ? v-model:file-list="fileList"
? ? name="file"
? ? :multiple="true"
? ? action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
? ? :headers="headers"
? ? @change="handleChange"
? >
? ? <a-button>
? ? ? <upload-outlined></upload-outlined>
? ? ? Click to Upload
? ? </a-button>
? </a-upload>
</template>

<script>
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
// hook
import useUpload from '../hooks/useUpload';
export default defineComponent({
? components: {
? ? UploadOutlined,
? },
? setup() {
? ? / 上傳hooks
? ? const { fileList, headers, handleChange } = useUpload();
? ? return {
? ? ? fileList,
? ? ? headers,
? ? ? handleChange,
? ? };
? },
});
</script>

hooks函數(shù)

import { ref } from 'vue';
import { message } from 'ant-design-vue';
export default function useUpload() {
  const handleChange = (info) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  
  const fileList = ref([]);
  return {
    fileList,
    headers: {
      authorization: 'authorization-text',
    },
    handleChange,
  };
}

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

您可能感興趣的文章: