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