詳解Vue如何自定義hooks(組合式)函數(shù)

更新時間：2023年03月13日 11:15:37 作者：itclanCoder

這篇文章主要為大家詳細(xì)介紹了在Vue中如何實現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

自定義hooks

解釋: 本質(zhì)上是一個函數(shù),把setup函數(shù)中使用的composition API進(jìn)行了封裝,復(fù)用有狀態(tài)邏輯的函數(shù)

類似Vue2的mixin

優(yōu)勢: 自定義hooks,復(fù)用代碼,讓setup中的邏輯更加清除易懂

點擊屏幕記錄鼠標(biāo)位置

現(xiàn)在有一個需求:就是記錄用戶點擊瀏覽器的位置,顯示到瀏覽器上,在組件中使用組合式API實現(xiàn)點擊鼠標(biāo)跟蹤功能,示例代碼如下所示

新建一個clickPoint.vue

import { ref,onMounted,onUnmounted } from 'vue';

const x = ref(0);  // 坐標(biāo)x的值
const y = ref(0);  // 坐標(biāo)y的值

function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
}
onMounted(() => {
    /*
    window.addEventListener('click',(event) => {
        x.value = event.pageX;
        y.value = event.pageY;
    })*/
    window.addEventListener('click',update)
    // 對于后面的這個回調(diào)處理函數(shù),可以單獨的抽離出去

})

// 解綁函數(shù)副作用
onUnmounted(() => {
    window.removeEventlistener('click',update);
})

模板代碼

<template>鼠標(biāo)的位置是:{{x}},{{y}}</template>

現(xiàn)在,如果想要在多個組件中復(fù)用這個相同的功能邏輯,我們可以把這個邏輯以一個組合式函數(shù)的形式提取到外部文件當(dāng)中的我們命名這個文件叫usePoint.js

import {ref,onMounted,onUnmounted} from 'vue';

// 按照習(xí)慣,約定俗成,組合式函數(shù)名以`use`開頭
export function usePoint() {
    // 被組合式函數(shù)封裝和管理的狀態(tài)
    const x = ref(0);
    const y = ref(y);

    function update(event) {
       x.value = event.pageX;
       y.value = event.pageY;
    }
    onMounted(() => {
      window.addEventListener('click',update)
    })
    // 解綁函數(shù)副作用
    onUnmounted(() => {
        window.removeEventlistener('click',update);
    })

    // 通過返回值暴露所有管理的狀態(tài)
    return {
        x,
        y
    }
}

那它在組件中使用的方式

<script setup>
    import { usePoint } from "./usePoint.js"

    const { x,y} = usePoint();
    // 如果希望以對象屬性的形式來使用組合式函數(shù)中返回的狀態(tài),可以將返回的對象用reactive()包裝一次,這樣其中的ref會被自動解包
    const clickPoint = reactive(usePoint());
    // clickPoint.x鏈接到原來的x ref
    console.log(clickPoint.x,clickPoint.y);
</script>

然后在模板中

<template>
    鼠標(biāo)的坐標(biāo): {{x}},{{y}}
    或
    鼠標(biāo)的坐標(biāo): {{clickPoint.x}},{{clickPoint.y}}
</template>

核心邏輯完全一致，我們做的只是把它移到一個外部函數(shù)中去，并返回需要暴露的狀態(tài)。和在組件中一樣，你也可以在組合式函數(shù)中使用所有的組合式 API?，F(xiàn)在，usePoint() 的功能可以在任何組件中輕易復(fù)用了。

可以嵌套多個組合式函數(shù)：一個組合式函數(shù)可以調(diào)用一個或多個其他的組合式函數(shù)。這使得我們可以像使用多個組件組合成整個應(yīng)用一樣，用多個較小且邏輯獨立的單元來組合形成復(fù)雜的邏輯。實際上，這也是將這一設(shè)計模式的 API 集合命名為組合式 API

hooks函數(shù)的命名

組合式函數(shù)約定用駝峰式命名,并以use作為開頭

與Mixin的對比

Vue2可能會對 mixins 選項比較熟悉。它也讓我們能夠把組件邏輯提取到可復(fù)用的單元里。然而 mixins 有三個主要的短板：

[1]. 不清晰的數(shù)據(jù)來源：當(dāng)使用了多個 mixin 時，實例上的數(shù)據(jù)屬性來自哪個mixin 變得不清晰，這使追溯實現(xiàn)和理解組件行為變得困難。這也是我們推薦在組合式函數(shù)中使用 ref +解構(gòu)模式的理由：讓屬性的來源一目了然

[2]. 命名空間沖突：多個來自不同作者的 mixin 可能會注冊相同的屬性名，造成命名沖突。若使用組合式函數(shù)，你可以通過在解構(gòu)變量時對變量進(jìn)行重命名來避免相同的鍵名

[3]. 隱式的跨 mixin交流：多個 mixin 需要依賴共享的屬性名來進(jìn)行相互作用，這使得它們隱性地耦合在一起。而一個組合式函數(shù)的返回值可以作為另一個組合式函數(shù)的參數(shù)被傳入，像普通函數(shù)那樣

在Vue 3中不推薦使用 mixin。有時需要查找一個變量,那么需要全局的搜索