vue 之 hook 运用

监听组件生命周期

mounted () {
  this.timer = setInterval(() => {
    this.count++
  }, 1000)
},
beforeDestroy () {
  console.log('beforeDestroy => 销毁定时器')
  clearInterval(this.timer)
}

利用 hook ，也可以这样，是不是代码整洁度瞬间上来了。

mounted () {
  this.timer = setInterval(() => {
    this.count++
  }, 1000)
  this.$once('hook:beforeDestroy', () => {
    console.log('hook:beforeDestroy => 销毁定时器')
    clearInterval(this.timer)
  })
}

任意地方用 this.$on/$once(‘hook:生命周期’，callback),就可以监听到生命周期的变化了

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

// 父组件
<ListenEvents @childMounted="handleChildMounted" />

handleChildMounted () {
  console.log('子组件 mounted 执行了')
}

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

运用 hook 后

<ListenEvents @hook:mounted="handleChildMounted" />

子组件不需要任何生命周期触发回调事件。

更多运用场景

第三方的组件库，你需要在这个组件发生改变时候做一些操作，而组件没有实现@change回调，如何获取了，这个时候 hook 就派上大用场了。