--- theme: cyanosis --- 最近因为在准备面试而重新温习vue的相关知识点，看到有一些文章介绍了 **“如何实现父组件监听子组件生命周期“** 以下是关于该需求的两个实现方式的理解 **方法一** 使用`$emit` ```javascript // 父组件 // 子组件 ... mounted () { this.$emit('mounted') } updated () { this.$emit('updated') } beforeDestroy () { this.$emit('beforeDestroy') } ... ``` 以上的方式可以看出，父组件给子组件传递了多个回调函数，依赖子组件在自身的生命周期里通过`vm.$emit`的方式，调用父组件生命的回调函数。这样的方式可以基本满足我们的需求，但总觉得还是有点笨拙。而且仔细思考的话，不难发现，子组件必须是我们自己编写的组件，如果子组件是一个第三方库引用的组件，我们就没办法去在它的生命周期里实现各个回调函数的调用了。 **方法二** 使用`@hook:` ```javascript // 父组件 // 子组件 ``` 看到这里，可能大家会有点疑惑，在父组件中添加类似`@hook:mounted="onMounted"`这样的属性，子组件无需相关代码即可实现生命周期监听吗？这里的`hook:`是什么东西？官方文档中并没有太多相关的解释说明，但在[程序化的事件侦听器](https://cn.vuejs.org/v2/guide/components-edge-cases.html?#%E7%A8%8B%E5%BA%8F%E5%8C%96%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BE%A6%E5%90%AC%E5%99%A8)在这个介绍里，我们看到了hook的身影。既然子组件无需相关代码就能触发父组件通过`@hook:`绑定的事件，那么我们猜测这一定是vue自身的逻辑里实现了这一块的功能。于是我们尝试着去源码里一探究竟。 ![image-20210911165340284.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/645c51a606454c8d8dfdd7042a049413~tplv-k3u1fbpfcp-watermark.image) 在`lifecycle.js`文件里，我们发现`vue`的生命周期的各个阶段都会去调用一个`callHook`函数，它支持两个参入，分别是实例`vm`和对应的生命周期钩子名称。而`callHook`里面就执行了`vm.$emit('hook:' + hook)`，看到这里，大家应该就有点熟悉了，这不就是刚才的方法一吗！所以方法二巧妙的地方就是复用了vue自身的逻辑。当我们在子组件上传入了对应的`@hook:mounted`钩子，也就是执行了`vm.$on('hook:mounted')`，而vue实例在生命周期里本身就会执行`vm.$emit('hook:mounted')`,其实就连带着触发了我们绑定给子组件的回调函数了。这就是`@hook:`的原理，但是官方文档在vue2.0里并没有将这个api正式地介绍给大家。 **拓展** 借助`hook:`我们还可以进行一些用法的拓展，这些拓展有时候可以提升我们代码的简洁性。在编写组件时,我们往往需要在各个生命周期里都针对某个业务逻辑做一些处理，业务散落在各个生命周期钩子里： ```javascript ``` 业务逻辑散落在各个生命周期里，有时候是不利于我们阅读代码的，尤其是当该业务是一个复杂的长段代码时，这个时候我们就可以考虑利用`hook:`来梳理某一块的业务代码，提升可阅读性： ```javascript ``` 这样就可以将散落的业务逻辑，都在一个created钩子函数里书写完毕，而且仍保持原来的生命周期逻辑。此外，另一个使用场景也是比较常见的，例如我们在编写组件时会执行一些事件监听或者定时器函数，我们希望在组件销毁的时候都能去销毁这些监听或者定时器，但是由于夸生命周期的问题，常常会将定时器赋值给一个全局变量或者绑定到this上，然后在另一个生命周期里获取并执行销毁操作。 ```javascript // 优化前 // 优化后 ``` 可以看到，经过优化后，我们可以避免了许多data里的无用变量的定义。