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),就可以监听到生命周期的变化了

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

如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢？

    //父组件中这样写
    <rl-child
      :value="40"
      @childMounted="handleChildMounted"
    />
    // 子组件中这样写
    mounted () {
      this.$emit('childMounted')
    },

这样确实可以实现，那有没有更好的方式呢？绿巨人说有！！

    //父组件中这样写
    <rl-child
      :value="40"
      @hook:mounted="handleChildMounted"
    />

    // 子组件中不用写东西
    mounted () {
      
    },

这样就实现了！是不是还简洁一点呢？

 

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

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

 

 

over