2020
11/13

【小ネタ】Vueのライフサイクルフックは複数コンポーネントの場合どの順で発火するのか

Vueのコンポーネントがマウントされる際、

breforeCreate()→create()→beforeMount()→mounted()→beforeDestroy()→destroyed()

の順に関数が実行されます。ライフサイクルフックと呼ばれる基本の動作です。

ライフサイクルダイアグラムより

これだけなら関数名も分かりやすいので理解しやすいと思いますが、この中でDOM構築完了後に実行される$nextTick()、Vueの関数ではないDOMContentLoadedやloadなどのイベントが実行された場合、どういう順場になるのかについて試してみました。

ADs

サンプルソース

以下のような2階層になったコンポーネントを用意し、その中でそれぞれ$nextTick()、addEventListenerでDOMContentLoaded,loadを実行します。

ルート App.vue

子コンポーネント HelloWorld.vue

孫コンポーネント HelloChild.vue

結果

console.logを見れば一目瞭然ですが、

1.created()(親から孫)
2.mounted()(孫から親)
3.$nextTick()(孫から親)
4.DOMContentLoaded(孫から親)
5.load(孫から親)

との順となりました。DOM構築完了後に実行したい処理については親コンポーネントのloadで実行すれば確実だと思います。
created()だけ順序が親からはじまる点には注意が必要です。

まとめ

created()は親→子→孫で発火する
それ以外は孫→子→親で発火する
DOM構築完了後関連のイベントはmounted→$nextTick()→DOMContentLoaded→loadの順

ということでした。

ADs

Post Comments

メールアドレスが公開されることはありません。