イベントとしてのVue.jsコンポーネントフック

こんにちはVue開発者！確かに、コンポーネントが作成、マウント、または破棄されたときにさまざまなアクションを実行するために、Vueでライフサイクルフックをすでに使用しています。また、コンポーネントとその親の間の通信にカスタムイベントを使用したこともあります。

しかし…Vueのライフサイクルフックが独自のカスタムイベントを発行することをご存知ですか？ええ、それはダミアン・デュリスがこのツイートで示したものであり、啓発的でした。

あなたは考えているかもしれません…なぜ私は気にする必要があります、アレックス？まあ、場合によっては役立つトリックを知っておくのは良いことです。この記事では、それらのいくつかを紹介します。

子供のフックを聞く

Vueのライフサイクルフックは、フック自体の名前にhook:というプレフィックスが付いたカスタムイベントを発行します。たとえば、mountedフックはhook:mountedイベントを発行します。

したがって、カスタムイベントの場合と同じように、親コンポーネントから子フックをリッスンできます。

<template>
  <Child @hook:mounted="childMounted"/>
</template>

<script>
import Child from "./Child";

export default {
  components: { Child },
  methods: {
    childMounted() {
      console.log("Child was mounted");
    }
  }
};
</script>

これは、サードパーティのプラグインフックに反応する場合にも役立ちます。たとえば、 v-runtime-template がテンプレートのレンダリングを終了したときにアクションを実行する場合は、@hook:updatedイベントを使用できます。

<template>
  <v-runtime-template @hook:updated="doSomething" :template="template"/>
</template>

魔法のようですね、ハ？おそらく、あなたはすでにこれらのケースに遭遇していて、フックが呼び出されたことを親に知らせるためだけに子にフックを作成しました。さて、あなたはそれが必要ではないことを知っています。

フックを動的に登録する

まれですが、カスタムイベントを動的に作成するのと同じ方法で、フックを動的に登録する必要がある場合があります。これは、$on、$once、および$offフックを使用して行うことができます。

Damianのツイートから抜粋した次の例を見てください。これは、 Pickaday のラッパーVueコンポーネントを作成しているため、beforeDestroyフックを動的に作成します。プレーンなJavaScript日付-ピッカーライブラリ。

プラグインはマウントされたフックで作成する必要があり、インスタンスをリアクティブ状態変数に保存しないため、プラグインを使用する唯一の方法は、Pickadayインスタンスを作成した直後にbeforeDestroyedフックを登録することです。

export default {
  mounted() {
    const picker = new Pickaday({
      // ...
    });

    this.$once("hook:beforeDestroy", () => {
      picker.destroy();
    })
  }
};

まとめ

hook:イベントを使用して、イベントを手動で発行する必要なしにフック呼び出しに反応するトリックを見てきました。

この記事のコードとデモは、このコードサンドボックスで見ることができます。