vue中的hook

最新推荐文章于 2025-10-28 17:35:54 发布

原创最新推荐文章于 2025-10-28 17:35:54 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue中hook的两种实用场景。一是如何在组件内部便捷地管理生命周期，如在`mounted`中添加监听并在`beforeDestroy`时自动移除，通过`$once('hook:beforeDestroy')`可以简化代码。二是展示如何在父组件中监听子组件的`mounted`事件，通过`@hook:mounted`指令，使得父组件能响应子组件状态的变化，无需子组件额外配合。对于缺少回调的第三方组件，hook的使用提供了一种灵活的解决方案。

vue中hook的两点使用

1. 在同一个组件中 (访问本组件中的生命周期)
例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现
mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},
就是你在任意地方用 this.$on/$once('hook:生命周期'，callback),
就可以监听到生命周期的变化了

2. 在父组件监听子组件的生命周期方法
如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢？
//原来的方式
//父组件中这样写
<rl-child
  :value="40"
  @childMounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
  this.$emit('childMounted')
},
//用 hook 实现方式
//父组件中这样写
<rl-child
  :value="40"
  @hook:mounted="handleChildMounted"
/>
 
// 子组件中不用写东西
mounted () {
   
},
如果：你用的是第三方的组件库，你需要在这个组件发生改变时候做一些操作，巧了这个组件还没有实现@change回调，你怎么获取呢，这个时候你转身发现hook真香唉！