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 解读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决elementui导航折叠卡顿的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue使用electron生成桌面应用过程，很想使用 electron 制作一个桌面应用，但是真的上手使用的时候才发现 electron 的坑实在是太多了，先将遇到的坑记录在这里，遇到一个记录一个2023-04-04
这篇文章主要为大家详细介绍了vue实现移动滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧2023-01-01
实际项目中偶尔会遇到给项目页面背景加水印的需求,这篇文章主要为大家介绍了Vue使用canvas实现水印功能的示例代码，希望对大家有所帮助2023-07-07
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下2018-01-01
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
这篇文章主要介绍了vue.js过滤器+ajax实现事件监听及后台php数据交互,结合实例形式分析了vue.js前台过滤器与ajax后台数据交互相关操作技巧,需要的朋友可以参考下2018-05-05
项目中需要使用websocke，这个是我自己修修改改好多次之后用得最顺手的一版，分享一下。这个封装需要搭配vuex使用，因为收到的数据都保存在vuex中了，真的绝绝子好用，解决了我一大堆问题2022-09-09
这篇文章主要介绍了vue 自定义组件的写法与用法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了Vue中强制组件重新渲染的正确方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
最新评论