vue 之 hook使用

记录一下vue中hook的两点使用

  1. 在同一个组件中
    例如:在mounted中添加一个监听需要在beforeDistroy中移除这个监听,考虑到某些原因你不想再写个beforeDistroy去实现,这时候绿巨人hook就该登场了!
mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},

就是你在任意地方用 this.on/once('hook:生命周期',callback),就可以监听到生命周期的变化了

  1. 在父组件监听子组件的生命周期方法
    如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢?
//父组件中这样写
<rl-child
  :value="40"
  @childMounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
  this.$emit('childMounted')
},

这样确实可以实现,那有没有更好的方式呢?绿巨人说有!!

//父组件中这样写
<rl-child
  :value="40"
  @hook:mounted="handleChildMounted"
/>
 
// 子组件中不用写东西
mounted () {
   
},

这样就实现了!是不是还简洁一点呢?

你可能会说,好鸡肋啊,不用你浩克也都能实现啊?这不是脱裤子放屁么?

那如果:你用的是第三方的组件库,你需要在这个组件发生改变时候做一些操作,巧了这个组件还没有实现@change回调,你怎么获取呢,这个时候你转身发现hook真香唉!

over

记录一下vue中hook的两点使用

超详细Vue Hook实践指南

vue hook 使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容