vue 之 hook 运用

作者: tww844475003 分类: 前端开发 发布时间: 2022-04-05 20:14

监听组件生命周期

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 就派上大用场了。

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。