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 解读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue.js每天必学之组件与组件间的通信,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
下面小编就为大家分享一篇vue+element-ui+ajax实现一个表格的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue3 企业级组件库框架搭建 pnpm monorepo实战示例
这篇文章主要为大家介绍了Vue3 企业级组件库框架搭建 pnpm monorepo实战示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下2023-04-04
Electron+vue从零开始打造一个本地播放器的方法示例
这篇文章主要介绍了Electron+vue从零开始打造一个本地播放器的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
vue3+vite使用History路由模式打包部署项目的步骤及注意事项
这篇文章主要介绍了vue3+vite使用History路由模式打包部署项目的步骤及注意事项,配置过程包括在Vue项目中设置路由模式、调整打包配置以及Nginx服务器的配置,正确的部署配置能够确保应用顺利运行,提升用户体验,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue项目base64字符串转图片的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了详解vue或uni-app的跨域问题解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
最新评论