vue中Hook Event实现原理

什么是Hook Event

hook event 是vue自定义事件结合其生命周期函数实现从组件外部为组件内部添加钩子函数的实现方法

Hook Event 实现原理

1. 在vue处理组件自定义事件时候（通过vm.$on处理自定义事件），如果发现组件上有绑定hook:xx格式的事件（xx表示vue的生命周期函数），则将标记组件有hook event（通过设置vm._hasHookEvent设置为true）
2. 然后在组件的生命周期函数执行时，会通过内部的callHook方法来执行对应的生命周期函数，生命周期函数执行完成后，判断vm._hasHookEvent是否为true，如果为true则通过执行**vm.$emit('hook:xx)**触发函数

// 自定义组件
<templete>
	<myCom @kook:mounted="hookHandle" />
</templete>

<script>
methord: {
	hookHandle() {
		// 会在子组件myCom的mounted触发后执行console.log('hook执行了')

		console.log('hook执行了')
	},
}
</script>