Vue Hook Event 深度解读

更新时间：2023年01月12日 10:10:29 作者：半兽先生

Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能，本文重点给大家介绍Vue Hook Event 解读，感兴趣的朋友一起看看吧

前言

Hook Event (钩子事件)相信很多 Vue 开发者都没有使用过，甚至没听过，毕竟 Vue 官方文档中也没有提及。

Vue 提供了一些生命周期钩子函数，供开发者在特定的逻辑点添加额外的处理逻辑，比如: 在组件挂载阶段提供了beforeMount 和 mounted 两个生命周期钩子，供开发者在组件挂阶段执行额外的逻处理，比如为组件准备渲染所需的数据。

那这个Hook Event——钩子事件，其中也有钩子的意思，和 Vue 的生命周期钩子函数有什么关系呢? 它又有什么用呢?这就是这边文章要解答的问题。

什么是 Hook Event ?
Hook Event是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

如下图所示，如果引入第三方业务组件，组件内部请求数据，没有loding，如果修改源码的话会很麻烦，现在用hook可以解决。

通过 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>
            // 第三方业务组件
            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");
                    // 通过 hook event 在组件外部为组件注入额外的生命周期钩子逻辑
                    // 通过Promise + setTimeout 延时程序，模拟接口调用的过程
                    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 有什么作用?
通过 Hook Event 可以从组件外部为组件注入额外的生命周期方法。

总结
面试官问: 什么是 Hook Event?
答:
Hook Event是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。.

面试官问: Hook Event 是如果实现的?
答:
<comp @hook:lifecycleMethod="method" />
处理组件自定义事件的时候 (vm.$on)如果发现组件有 hook:xx 格式的事件(xx为 Vue 的生命周期函数)，测将 vm._hasHookEvent 置为 true ，表示该组件有 Hook Event
在组件生命周期方法被触发的时候，内部会通过 calLHook 方法来执行这些生命周期函数，在生命周期函数执行之后，如果发现 vm._hasHookEvent 为 true，则表示当前组件有 Hook Event，通过vm.$emit('hook:xx') 触发 Hook Event 的执行
这就是 Hook Event 的实现原理。

到此这篇关于Vue Hook Event 解读的文章就介绍到这了,更多相关Vue Hook Event 解读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

动态实现element ui的el-table某列数据不同样式的示例
这篇文章主要介绍了动态实现element ui的el-table某列数据不同样式的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Vue项目中如何引入本地第三方JS库
vue中常遇到第三方js,这篇文章主要给大家介绍了关于Vue项目中如何引入本地第三方JS库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue中的event bus非父子组件通信解析
本篇文章主要介绍了 vue中的event bus非父子组件通信解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Element+Vue实现动态表单多个下拉框组件功能
这篇文章主要介绍了Element+Vue实现动态表单多个下拉框组件功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
vue实现在线预览pdf文件和下载（pdf.js）
这篇文章主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
webstorm添加*.vue文件支持
这篇文章主要介绍了webstorm添加*.vue文件支持，webstorm很多的插件内置，不用安装插件，下面尝试用vue和es6做项目，有兴趣的可以了解一下
2018-05-05
vuex的使用步骤
这篇文章主要介绍了vuex的使用步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
vue使用keep-alive后清除缓存的方法
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue中如何实现在线预览word文件、excel文件
这篇文章主要介绍了Vue中如何实现在线预览word文件、excel文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07