Vue的hook事件和程序化监听

对于Vue的事件机制，其实还有一些高级技巧我们还是要掌握的。1、组件生命周期钩子事件Vue的生命周期函数其实就是Vue开发者设置的一些钩子。你只需要在钩子里面写代码，它就可以执行了。比如vue实例中的beforeCreate、created、mounted等都是hook。但是你可能不知道，在Vue中，当hook函数被触发时，还会向父组件$emit发送一个事件，称为hookEvent。这个事件的名字是hook，参数以冒号的形式提供。参数是每个钩子函数的名称，如下例所示：上面的代码应该这样读：当子组件my-组件执行挂载的钩子函数，会自动向父组件冒泡一个叫hook:mounted的事件，即this.$emit('hook:'+'mounted')，不管你有没有写具体的挂载代码我的组件。理解hook事件重要的是：这是一个自动从子组件冒泡到父组件的事件。捕获父组件中的事件并进行相应处理。这不是HTML元素标签级别的事件，而是组件级别的事件。在普通标签上使用源码分析在Vue的官方文档中，我们找不到任何与hook事件相关的东西，但是我们可以从源码中分析：下面是截取的Vue源码，注意callHook函数：vm._self=vminitLifecycle(vm)//初始化生命周期initEvents(vm)//初始化事件initRender(vm)callHook(vm,'beforeCreate')initInjections(vm)//在数据/propsinitState(vm)initProvide(vm)//resolveprovidedata/propscallHook(vm,'created')之后，可以看出生命周期函数是通过函数callHook调用的。我们看一下callHook函数的源码：exportfunctioncallHook(vm:Component,hook:string){//#7573disabledepcollectionwheninvokinglifecyclehookspushTarget()consthandlers=vm.$options[hook]//options生命周期函数constinfo=`${hook}hook`if(handlers){for(leti=0,j=handlers.length;i