ライフサイクルフックって何。
vueインスタンスが生成されてとか知らんし。とりあえず動けばいいし。
と考えていた自分に鞭を打つ。ライフサイクルフックを軽くでも頭に入れておかないと痛い目にあうらしい。
Vue嫌い！無理！とイヤイヤ期に突入してしまった自分を鼓舞するために、今回はライフサイクルフックを学習していく。
ライフサイクルフックとは
>Vueインスタンスが生成されてから破棄されるまでの流れ
Vueのライフサイクルは大きく分けて以下の５つに分けられるとのこと。
(https://techblog.roxx.co.jp/entry/2019/02/27/120000)
具体的にどんな処理をしている？
Vueインスタンス生成
実行されるフック：beforeCreate created
Vueインスタンスが生成される。一番最初の地点。
リアクティブデータが作られる時を起点として、作られる前をbeforeCreate, 作られた後をcreatedが対処している。
document.addEventListener('DOMContentLoaded', () => {
const vm = new Vue({
render: (h) => h(App),
}).$mount();
document.body.appendChild(vm.$el);
console.log(vm);
});
このvmは、ViewModelの略称で、MVVMの考え方からきているそう。
リアクティブデータとは
何かの変更が一瞬で反映されること。Reactiveに相互の値がリンクして変化する。
methodsに書いた関数を実行した時に、dataにおかれたデータが連動して変化する。
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` は今リアクティブです
vm.b = 2
// `vm.b` はリアクティブでは"ありません"
リアクティブにしたいデータはdataの中に格納しておく必要がある。
DOMへのマウント
マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えること。
実行されるフック：beforeMount mounted
mountedの段階でVueインスタンスがDOMにマウントされるため、DOMの内容を変えるようなメソッドはここに記述する。
DOMにアクセス可能なのはmounted以降になる。
Vue.js入門 2章 Vue.jsの入門（コンストラクタ、マウント、data） - Qiita
データ変更／画面の更新
Vueインスタンスの
dataが変更された場合や、propsで渡されているデータが親で変更された場合など、それらの値の変更のタイミングでDOMを自動的に更新し再描画します。
実行されるフック：beforeUpdate updated
methodsで書いた関数を実行すると、dataの内容に変更が生じる。
親コンポーネントで管理している値に変化が生じた際には、親が子に渡したpropsも変更させたい。
その時はupdateにdataが変更された時の処理を記述しておけばおっけい。
Vueインスタンス破棄
実行されるフック：beforeDestroy destroyed
メモリリークを防ぐために、使わないVueインスタンスは破棄しておきたい。
- メモリリークとは
必要のないメモリに容量を食われていくこと。
https://wa3.i-3-i.info/word16066.html
エラー捕捉
フックは、エラー、エラーをトリガするコンポーネントインスタンス、そしてどこでエラーが捕捉されたかの文字列情報、これら 3 つの引数を受け取ります
実行されるフック：errorCaptured
- 子コンポーネントでエラー が発生したら 親コンポーネント側 のこのフックが走る
errorCapturedは 3 つの引数から以下の情報を得ることができる｡- 例外情報
- 例外が発生したコンポーネント情報
- 例外が発生し場所に関する情報を含む文字列
createdとmountedの違い
created
>非同期通信を使ってデータを初期化するとき
createdを使う代表例として、APIなどを叩いて非同期通信で取得したデータをdataに初期値として挿入する処理が挙げられる。
初期化のタイミングで使うという面ではbeforeMountやmountedで 非同期通信を行ってもよいが、DOMのマウントが行われデータを画面に反映するまでの時間を少しでも減らすために、createdを使う必要があるとのこと。
また、beforeCreateではリアクティブデータが初期化されていないため、dataに挿入することができないようだ。
mounted
>DOMにアクセスする必要がある場合
DOM要素にアクセスする必要がある場合や、HTML要素の高さや幅を取得する場合の初期化処理は、DOMが構築された後のフックであるmountedに書くといい。 ただし、mountedは 全ての子コンポーネントがマウントされていることを保証しないことに注意が必要。
Vue全体がレンダリングされた後に処理を行いときは、vm.$nextTickを使う。
そのほかで知っておきたい要素
算出プロパティ
computedというフックで、複雑なロジックをここに記述することができる。下記のような特徴を持つ。
- キャッシュされる。
- リアクティブ依存が変更されたときにだけ再算出する。
methods
methodsプロパティでは様々なメソッドを定義して保管しておくことができます。
再描画が起きる度に実行される。
まとめ
- 「@click="createShuchedule"がついたボタンが押された後、フォーム内の合計値を計算してrouter.push('result')をする」処理を記述する場所はmethods.
[Vue.js] ライフサイクルをみる( beforeCreate から destroyed まで ) - Qiita
第３回 - Vue.jsのライフサイクル等の簡易逆引きリファレンス|blog(スワブロ) | スワローインキュベート
[Vue.js] ライフサイクルをみる( 動的コンポーネントと activate / deactivate / errorCaptured ) - Qiita
