• トップ
  • ブログ一覧
  • VueのLifeCycleっていうのは???
  • VueのLifeCycleっていうのは???

    イデ(エンジニア)イデ(エンジニア)
    2022.10.19

    IT技術

    初めに

    こんにちは!
    皆さん久しぶりです!

    最近は夏が終わった気がしますね。風邪に気をつけてください。

    今回のテーマは「vue.jsのライフサイクル」です!!!
    よろしくお願いいたします。

    Vue.jsっていうのは?

    Vue.jsはフロントエンド開発を楽にするため、reactと共に大衆的なオープンソースjavascriptフレームワークです。
    ざっくりVue.jsの長所を紹介します!

    1. Learning Curveが低い
    2. React、Angularに比べて、軽い&早い
    3. React(Virtual DOM)、Angular(データバインディング)の長所を持っている
    4. Component基盤のフレームワークで、ブロックのようにComponentの組み合わせで構成、コードの再利用率が高い
    5. Virtual DOM:画面に変化がある度にリアルタイムでDOMを修正せず、変更事項が反映されたVirtualDOMを利用してメモリで処理し、一度だけDOM修正を行う。結果的にブラウザは一回だけのレンダリングすることによって不要なレンダリング回数を減らしてレンダリング性能を高める

    Vue - Life Cycle(ライフサイクル)


    引用:https://jp.vuejs.org/v2/guide/instance.html

    では、四つの段階で分けてみましょう!

    Creation:Component初期化

    Creationでは、ライフサイクルの中で最初に実行されるところです。
    ここでは、ComponentがDOMに追加される前です。サーバーレンダリングでも対応しているところです。

    なので、Clientの方とサーバーレンダリングの方で処理することがあれば、この段階で進めたらOKです!

    ここでは、beforeCreateとCreateがあります。

    beforeCreate:一番最初に実行されるhookです。まだ、dataとevents(vm、$el等)が設定されていないので、呼び出すとエラーになります。

    1<script>
    2    export default {
    3        data () {
    4            return {
    5                test: null
    6            }
    7        },
    8
    9        beforeCreate () {
    10            // this.test → エラーになります。
    11        }
    12    }
    13</script>

    Create:dataとevents(vm)が設定されて、呼び出せます。(まだ、Virtual DomとMount、レンダリングは実装されてないです。)

    1<script>
    2    export default {
    3        data () {
    4            return {
    5                test: 1
    6            }
    7        },
    8        created() {
    9            // this.test → 1
    10        }
    11    }
    12</script>

    Mounting:DOM合わせ

    Mountingでは、初期レンダリング直前にComponentに処理の追加ができます。(サーバーレンダリングでは対応していません。)

    初期レンダリングの前にDomを変更しようとしたら、この段階で使えますが、
    Componentの初期に設定されるデータなら、created段階で行った方が良いとおみます。

    beforeMount:templateとレンダリングFunctionがコンパイルされた後に、初レンダリングされる直前に実行されます。

    1<script>
    2    export default {
    3        beforeMount() {
    4            // this.$el → エラー!まだです。
    5        }
    6    }
    7</script>

    Mounted:mountedでは、Component、template、レンダリングされたDOMに処理ができます(子Componentが全部Mountedされたとは言えません。)

    1<script>
    2    export default {
    3        mounted() {
    4            // console.log(this.$el) → DOM要素OK!
    5        }
    6    }
    7</script>

    Mountedで、一番注意するところは「親Componentと子Componentの順番」です!

    Createdは「親 → 子」順で実行されますが、
    Mountedは「子 → 親」順で実行されます!(親ComponentのMountedは子ComponentのMountedが終わるまで待ってます!)

    ここだけ、気をつけてください。

    Updating:再レンダリング

    Componentで使われてる値が変わったり、どんな理由で再レンダリングが発生したら、実行されます。

    beforeUpdate:Componentのデータが変わって、Updateサイクルが始まる時実行される。DOMが再レンダリングされ、fetctされる前に実行される。
    ここの変更で、再レンダリングはトリガーされないです。

    Updated:Componentのデータが変わって、再レンダリングが行われた後に実行される。
    DOMがUpdated完了の状態なので、DOM処理も可能です。(子Componentが全部Updatedされたとは言えません。)

    1<script>
    2    export default {
    3        updated() {
    4            this.$nextTick(function() {
    5                // レンダリングされた後に実行される
    6            })
    7        }
    8    }
    9</script>

    Destruction:解体

    beforeDestroy:Vueインスタンスが消える前に呼び出されます。Componentは元の機能を持ってます。eventListenerの削除等が可能です。サーバーレンダリングされる際に呼び出さないです。

    destroyed:Vueインスタンスが消えた後に呼び出されます。Vueインスタンスの全バインディングが解体され、全eventListenerの削除等が可能です。全下位Vueインスタンスも削除されます。全サーバーレンダリングされる際に呼び出さないです。

    最後に、、、

    ここまでいかがでしょうか?

    vueのライフサイクルを理解して置くと、今後vueの開発が楽になります!

    それでは次の記事でお会いしましょう!
    最後まで読んでいただき、ありがとうございました!🙇‍♂️

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    イデ(エンジニア)

    イデ(エンジニア)

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background