Django 个人博客网站开发,宠物网站页面设计理念,建站步骤图,食品网站开发前言
在之前的几篇文章中#xff0c;都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的#xff0c;比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下: 那么接下来一起来了解下到底什么是 Hook Event #xff1f;
Hook Event
是什…前言
在之前的几篇文章中都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下: 那么接下来一起来了解下到底什么是 Hook Event
Hook Event
是什么
Hook Event 在 vue 的官方文档中并没有提及到这也是很多人很少或者几乎没有使用到 Event Hook 的主要原因但这不代表不可以使用.
Vue 中提供了对应的生命周期钩子方便开发者在特定的时间节点进行对应的逻辑处理比如在组件的 mounted 生命周期钩子中准备组件渲染所需要的数据.
而 Hook Event 是通过 Vue 中 自定义事件 生命周期钩子 的方式实现从组件外部为组件注入额外生命周期方法的功能.
怎么用
这里直接通过一个简单的例子来快速了解 Hook Event 的使用.
首先通过 Vue.component() 注册了 ListView 主要用于列表渲染在其 mounted 生命周期钩子中通过 setTimeout() 模仿接口请求并在模板中进行使用 list-view hook:mountedmountedAction/list-view接着通过 hook:mountedmountedAction 向列表组件组件中注入了外部定义的 mounted 钩子中需要执行的事件此时控制台上的输出结果为 这就证明了 Hook Event 就是通过 自定义事件 生命周期钩子 的方式实现从组件外部为组件注入额外生命周期方法.
具体代码如下 // HTML 模板div idapplist-view hook:mountedmountedAction/list-view/div// JS 逻辑 script// 第三方 vue 组件Vue.component(ListView, {template:ul classlist-viewli v-foritem in list{{ item }}/li/ul,data(){return {list: []}},mounted(){console.log(mounted in ListView...);setTimeout((){this.list [1,2,3,4,5,6];},1000);}});new Vue({el: #app,methods:{mountedAction(){console.log(mountedAction from parent...);}}});/scriptcallHook() 方法
文件位置src\core\instance\lifecycle.js
callHook 中通过 vm._hasHookEvent 标识判断是否存在 Hook Event而这个标识是在 Vue.prototype.$on 实例方法中进行定义的详情可看 eventsMixin(Vue) 方法.
export function callHook (vm: Component, hook: string) {// #7573 disable dep collection when invoking lifecycle hooks// 调用前打开依赖收集 pushTarget()// 从组件配置项中获取对应的生命周期钩子类型为数组const handlers vm.$options[hook]const info ${hook} hookif (handlers) {for (let i 0, j handlers.length; i j; i) {// 通过 apply 或 call 的方式调用生命周期函数invokeWithErrorHandling(handlers[i], vm, null, vm, info)}}// 如果有 HookEvent 事件传入则通过 $emit 调用这个事件如 hook:mountedif (vm._hasHookEvent) {// 本质就是执行 vm._events[hook:mounted] 数组中的所有处理函数vm.$emit(hook: hook)}// 调用完成后关闭依赖收集popTarget()
}invokeWithErrorHandling() 方法
文件位置src\core\util\error.js
/*1. 使用 try catch 包裹生命周期钩子中的逻辑便于进行异常捕获2. 调用生命周钩子有 args 参数通过 apply 调用否则通过 call 调用3. 返回调用结果
*/
export function invokeWithErrorHandling (handler: Function,context: any,args: null | any[],vm: any,info: string
) {let restry {res args ? handler.apply(context, args) : handler.call(context)if (res !res._isVue isPromise(res) !res._handled) {res.catch(e handleError(e, vm, info (Promise/async)))// issue #9511// 避免在嵌套调用时多次触发 catchres._handled true}} catch (e) {// 异常处理handleError(e, vm, info)}return res
}总结 Hook Event 原理是什么 首先 Hook Event 的作用实现从组件外部为组件注入额外生命周期方法的功能主要是通过 自定义事件 生命周期钩子 的方式实现的.
vue 在处理组件如 comp hook:lifecyclecustomMethod / 时会将这个事件通过 vm.$on() 即 Vue.prototype.$on() 方法进行监听处理并且遇到格式为 hook:xx 的事件时会将 vm._hasHookEvent 置为 true表示该组件有 Hook Event在通过 callHook() 方法调用生命周期钩子时会以循环的方式执行组件上对应的生命周期钩子在执行完后组件上的生命周期钩子后会通过 vm._hasHookEvent 标识判断当前组件是否存在 Hook Event如果存在就通过 vm.$emit(hook:xxx) 即 Vue.prototype.$emit() 方法调用 vm._events[hook:xxx] 事件上的所有处理函数
