Vue Hook Event 深度解讀

更新時(shí)間：2023年01月12日 10:10:29 作者：半獸先生

Hook Event 是 Vue 的自定義事件結(jié)合生命周期鉤子實(shí)現(xiàn)的一種從組件外部為組件注入額外生命周期方法的功能，本文重點(diǎn)給大家介紹Vue Hook Event 解讀，感興趣的朋友一起看看吧

前言

Hook Event (鉤子事件)相信很多 Vue 開(kāi)發(fā)者都沒(méi)有使用過(guò)，甚至沒(méi)聽(tīng)過(guò)，畢竟 Vue 官方文檔中也沒(méi)有提及。

Vue 提供了一些生命周期鉤子函數(shù)，供開(kāi)發(fā)者在特定的邏輯點(diǎn)添加額外的處理邏輯，比如: 在組件掛載階段提供了beforeMount 和 mounted 兩個(gè)生命周期鉤子，供開(kāi)發(fā)者在組件掛階段執(zhí)行額外的邏處理，比如為組件準(zhǔn)備渲染所需的數(shù)據(jù)。

那這個(gè)Hook Event——鉤子事件，其中也有鉤子的意思，和 Vue 的生命周期鉤子函數(shù)有什么關(guān)系呢? 它又有什么用呢?這就是這邊文章要解答的問(wèn)題。

什么是 Hook Event ?
Hook Event是 Vue 的自定義事件結(jié)合生命周期鉤子實(shí)現(xiàn)的一種從組件外部為組件注入額外生命周期方法的功能。

如下圖所示，如果引入第三方業(yè)務(wù)組件，組件內(nèi)部請(qǐng)求數(shù)據(jù)，沒(méi)有l(wèi)oding，如果修改源碼的話會(huì)很麻煩，現(xiàn)在用hook可以解決。

通過(guò) hook event 在組件外部為組件注入額外的生命周期鉤子邏輯：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <comp @hook:mounted="handleHookEvent"></comp>
        </div>
        <script src="./vue.js"></script>
        <script>
            // 第三方業(yè)務(wù)組件
            Vue.component("comp",{
                template:`
                    <ul>
                        <li v-for="item in arr" :key="JSON.stringify(item)">{{ item }}</li>
                    </ul>
                `,
                data(){
                    return {
                        arr:[]
                    }
                },
                async mounted(){
                    console.log("comp mounted");
                    // 通過(guò) hook event 在組件外部為組件注入額外的生命周期鉤子邏輯
                    // 通過(guò)Promise + setTimeout 延時(shí)程序，模擬接口調(diào)用的過(guò)程
                    this.arr = await new Promise(resolve=>{
                       setTimeout(()=>{
                        resolve([1,2,3,4,5])
                       },2000)
                    }) 
                }
            })
 
            new Vue({
                el:"#app",
                methods:{
                    handleHookEvent() {
                        console.log('loding...');
                    }
                }
            })
        </script>
    </body>
</html>

Hook Event 有什么作用?
通過(guò) Hook Event 可以從組件外部為組件注入額外的生命周期方法。

總結(jié)
面試官問(wèn): 什么是 Hook Event?
答:
Hook Event是 Vue 的自定義事件結(jié)合生命周期鉤子實(shí)現(xiàn)的一種從組件外部為組件注入額外生命周期方法的功能。.

面試官問(wèn): Hook Event 是如果實(shí)現(xiàn)的?
答:
<comp @hook:lifecycleMethod="method" />
處理組件自定義事件的時(shí)候 (vm.$on)如果發(fā)現(xiàn)組件有 hook:xx 格式的事件(xx為 Vue 的生命周期函數(shù))，測(cè)將 vm._hasHookEvent 置為 true ，表示該組件有 Hook Event
在組件生命周期方法被觸發(fā)的時(shí)候，內(nèi)部會(huì)通過(guò) calLHook 方法來(lái)執(zhí)行這些生命周期函數(shù)，在生命周期函數(shù)執(zhí)行之后，如果發(fā)現(xiàn) vm._hasHookEvent 為 true，則表示當(dāng)前組件有 Hook Event，通過(guò)vm.$emit('hook:xx') 觸發(fā) Hook Event 的執(zhí)行
這就是 Hook Event 的實(shí)現(xiàn)原理。

到此這篇關(guān)于Vue Hook Event 解讀的文章就介紹到這了,更多相關(guān)Vue Hook Event 解讀內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: