Vue怎么自定義hooks函數

本文小編為大家詳細介紹“Vue怎么自定義hooks函數”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue怎么自定義hooks函數”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在Vue當中,一個非常重要的功能就是組件的復用,編寫Vue組件,更多的也是在拼裝組件,將頁面的各個功能進行模塊化

便于維護和管理,而在項目里,有些頁面中的組件的邏輯功能是一樣的,如果沒有進行功能邏輯的復用,那么每個頁面都需要重復的寫一遍

在Vue當中各個組件是保持獨立的,如果想要復用頁面當中的某個組件的邏輯,也就是復用組件邏輯的代碼

那么可以抽離邏輯,放到一個公共的地方管理的,方便在其他地方調用,達到復用代碼和邏輯的目的

在Vue2當中可以使用mixin,但使用這個有很多缺點,而在Vue3中引入了組合式函數,也就是自定義hooks就很好的解決了之前的問題

自定義hooks

解釋: 本質上是一個函數,把setup函數中使用的composition API進行了封裝,復用有狀態邏輯的函數

類似Vue2的mixin

優勢: 自定義hooks,復用代碼,讓setup中的邏輯更加清除易懂

點擊屏幕記錄鼠標位置

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

新建一個clickPoint.vue

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

const x = ref(0);  // 坐標x的值
const y = ref(0);  // 坐標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)
    // 對于后面的這個回調處理函數,可以單獨的抽離出去

})

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

模板代碼

<template>鼠標的位置是:{{x}},{{y}}</template>

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

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

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

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

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

那它在組件中使用的方式

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

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

然后在模板中

<template>
    鼠標的坐標: {{x}},{{y}}
    或
    鼠標的坐標: {{clickPoint.x}},{{clickPoint.y}}
</template>

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

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

hooks函數的命名

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

與Mixin的對比

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

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

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

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

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

與無渲染組件的對比

組合式函數相對于無渲染組件的主要優勢是：組合式函數不會產生額外的組件實例開銷。當在整個應用中使用時，由無渲染組件產生的額外組件實例會帶來無法忽視的性能開銷。

我們推薦在純邏輯復用時使用組合式函數，在需要同時復用邏輯和視圖布局時使用無渲染組件。

讀到這里，這篇“Vue怎么自定義hooks函數”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。