腳本之家服務器常用軟件

快捷導航

詳解Vue?自定義hook?函數(shù)

更新時間：2022年06月15日 11:56:01 作者：奔跑吧雞翅

這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質是一個函數(shù)，把setup函數(shù)中使用的Composition?API進行了封裝，更多相關內容感興趣的朋友可以參考一下

定義

什么是hook?

本質是一個函數(shù)，把 setup 函數(shù)中使用的 Composition API （組合API）進行了封裝
類似于 vue2.x 中的 mixin

自定義 hook 的優(yōu)勢：

復用代碼，讓 setup 中的邏輯更清楚易懂

使用

首先我們做一個功能，鼠標點擊屏幕，獲取坐標:

<template>
  <h2>當前鼠標的坐標是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>
<script>
import {onMounted, onBeforeUnmount,reactive} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let point = reactive({
      x: 0,
      y: 0
    })
    function savePoint(event) {
      point.x = event.pageX;
      point.y = event.pageY;
    }
    onMounted(() => {
      window.addEventListener("click",savePoint)
    })
    onBeforeUnmount(()=>{
      window.removeEventListener("click",savePoint)
    })
    return {
      point,
    }
  },
}
</script>

然后改用使用 hooks，在 src 下新建 hooks 文件夾，增加 usePoint.js

import {onBeforeUnmount, onMounted, reactive} from "vue/dist/vue";
function savePoint() {
    let point = reactive({
        x: 0,
        y: 0
    })
    function savePoint(event) {
        point.x = event.pageX;
        point.y = event.pageY;
    }
    onMounted(() => {
        window.addEventListener("click",savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener("click",savePoint)
    })
    return point
}
export default savePoint;

或者簡寫：

......
export default function() {
    ......
}

在 Demo.vue 中使用:

<template>
  <h2>當前鼠標的坐標是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>
<script>
import usePoint from "@/hooks/usePoint";
export default {
  name: 'Demo',
  setup() {
    let point = usePoint()

    return {
      point
    }
  },
}
</script>

封裝發(fā)ajax請求的hook函數(shù)（ts版本）

hooks 下新建 useRequest.ts

由于用到了 axios，所以安裝axios：npm install axios

import {ref} from "vue";
import axios from "axios";
export default function <T>(url: string) {
    const loading = ref(true);
    const data = ref<T | null>(null);
    const errorMsg = ref('');
    axios.get(url).then(response => {
        loading.value = false
        data.value = response.data
    }).catch(error => {
        loading.value = false
        errorMsg.value = error.message || '未知錯誤'
    })
    return {
        loading,
        data,
        errorMsg
    }
}

App.vue:

<template>
  <h3 v-if="loading">加載中...</h3>
  <h3 v-else-if="errorMsg">錯誤信息：{{errorMsg}}</h3>
  <!-- 對象 -->
  <ul v-else>
    <li>{{data.name}}</li>
    <li>{{data.address}}</li>
    <li>{{data.distance}}</li>
  </ul>
  <!-- 數(shù)組 -->
  <ul v-for="item in data" :key="item.name">
    <li>{{item.name}}</li>
    <li>{{item.address}}</li>
    <li>{{item.distance}}</li>
  </ul>
</template>
<script lang="ts">
import {defineComponent, watch} from 'vue';
import useRequest from "@/hooks/useRequest";

export default defineComponent({
  setup() {
    // 定義接口
    interface IAddress{
      name:string,
      address:string,
      distance:string
    }
    //const {loading,data,errorMsg} = useRequest<IAddress>("./address.json")//獲取對象數(shù)據(jù)
    const {loading,data,errorMsg} = useRequest<IAddress[]>("./addressList.json")//獲取對象數(shù)據(jù)
    watch(data, () => {
      if (data.value) {
        console.log(data.value.length)
      }
    })
    return {
      loading,
      data,
      errorMsg
    }
  }
});
</script>

測試數(shù)據(jù)有對象類型的 address.json:

{
  "name": "家",
  "address": "開發(fā)區(qū)人民路22號",
  "distance": "100km"
}

還有數(shù)組類型的 addressList.json

到此這篇關于詳解Vue 自定義hook 函數(shù)的文章就介紹到這了,更多相關Vue 自定義hook 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解Vue?自定義hook?函數(shù)

目錄

定義

使用

封裝發(fā)ajax請求的hook函數(shù)（ts版本）

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具