vue2 hook

什么是 Hook Event？

Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

作用：

1. 可以避免了许多 data 里的无用变量的定义

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 使用场景

1. 在同一个组件中

1. 在同一个组件中注册/停止一个监听事件

hook 实现：可以用 hook 来监听 beforeDestory 生命周期。因为只要监听一次就够了，所以用$once 来注册监听。

export default {
  methods: {
    fn() {
      const timer = setInterval(() => {
        //具体执行代码
        console.log("1");
      }, 1000);
      this.$once("hook:beforeDestory", () => {
        clearInterval(timer);
        timer = null;
      });
    },
  },
};

惯用方法：

export default{
  data(){
    timer:null
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

缺点：

1. vue 实例中需要有这个定时器的实例，感觉有点多余;
2. 创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;

2.在父组件监听子组件的生命周期方法

父组件如何在子组件的 mounted 生命周期里做某些处理？

// 父组件
<rl-child
  :value="40"
  @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

惯用方法：

//父组件
<rl-child
  :value="40"
  @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

---

参考：Vue 源码解读（7）—— Hook Event (opens new window) vue hook 使用 (opens new window)