2019/10/23vue.jsのcreatedとmountedの違いを目で見て理解vue.jsのライフサイクルの説明を目にする機会は多いですが、文書だけで説明してる場合が多く初心者の人が理解するのは難しいです。mountedだけでもはっきり区別がつけばライフサイクル図の理解ができるかもしれません。今回はvue.jsのライフライクルフックcreatedとmountedの違いを要素elを使って説明してみます。vue.jsはcdnを利用して使うため特別な環境の構築は必要ありません。デスクトップ等にindex.htmlファイルを作成し一緒に動作確認を行なってみてください。vue.jsの公式サイトに掲載されているライフサイクル図。beforeCreateにのみ注目します。mountedはライフサイクルフックと呼ばれ、vue.jsの初期化の決められたタイミングで実行される関数です。ライフサイクルフックの中にプログラムを記述するとvue.jsの初期化の流れの中でその関数が必ず自動で実行されます。初期化とはvue.jsが使えるようになるまでの処理ですAPIなどを利用して外部からデータを取得してブラウザに表示させたい場合は、ライフサイクルフックの中でaxiosなど利用してデータ取得のプログラムを記述しておきます。ライフサイクルフックの中にデータ取得のプログラムを記述することでvue.jsの起動中にデータの取得を開始し、取得が完了するとブラウザにそのデータ内容を表示させることができます。elがなにか確認してみようライフサイクルを記述した上の図に”el”という文字列を見つけることができます。elはvue.jsインスタンスがマウントを行う要素で、elが指定された要素の中でだけvue.jsを動かすことができます。Vueで下記のようにして#appといった要素を特定するidの値を記述します。},})このelが一体どのような情報を持っているのか確認してみましょう。elにはthis.$elでアクセスすることができます。button要素を作ってv-onディレクティブでclickイベントを設定し、クリックが行われたらshowElメソッドを実行しコンソールにthis.$elの中身を表示させます。id=”#app”></div>が表示されます。中身は、document.getElementById(‘app’)を使って取得できるものと同じです。this.$elの中身を表示getElementById(‘app’)で取得できる要素と同じなので、innnerHTMLで中身を書き換えることも可能です。Vueに書き換えられることが確認できます。Vueインスタンスで指定した要素そのものであることがわかりました。createdとmountedの違いelの中身がわかったので、ライフサイクルフックのcreatedとmountedの違いを確認しておきましょう。createdとmountedの違いは下記のように説明されているのをよく見かけます。createdはDOMがまだ作られていない状態で、mountedではDOMが作成された直後の状態です。DOMの作成、未作成でライフサイクルフックの違いが別れているということなので、this.$elを使ってその違いを確認してみましょう。確認方法はシンプルでcreatedとmountedにconsole.logでthis.$elがそれぞれの状態でどのようになっているか確認するだけです。this.$elはDOMの要素なのでDOMが作成されていないとthis.$elは存在しません。id=”app”></div>が表示されます。mountedの違いがわかりました。そのため、createdの時にgetElementById(‘id’)を使ってなにかDOMの要素を取得しようとしても取得することはできません。mounted時にはDOMの作成が完了しているのでDOMの要素が取得できるためgetElementByIdだけではなくvue.js以外のライブラリjQuery等(DOMを利用するもの)もこの時点で使用可能となります。createdでは何が完了しているのかではcreatedでは何が完了しているのでしょう。先程まではthis.$elでelの状態を確認しましたが、その中身は見えませんでした。今度はthisを使ってVueインスタンスを確認します。今回はdataにmessageプロパティの設定も行っておきます。}Vueインスタンスの作成が完了しているので、設定しているmessageをVueの中で確認することができます。this.messageをcreatedの中で上書きした値も反映されていることが確認できます。これでcreatedでインスタンスの作成が完了、dataオブジェクトがリアクティブになっているという説明を受けても理解することができます。createdの状態でVueインスタンスを確認dataオブジェクトがリアクティブになっているのでcreatedの中でAPIを使ってデータ取得を開始しても問題がないこともわかります。このようなコードを見かけるのも納得できるかと思います。}createdとbeforeCreateの違いbeforeCreateでは、dataの中身を確認することができますが、createdのようにmessageの上書きを行うことはできません。console.log(this)}beforeCreateでdata変更これでbeforeCreateでインスタンスの作成が完了、dataオブジェクトがリアクティブになっていないという説明を受けても理解することができます。mountedのライフサイクルフックの違いも理解できたかと思います。createdとbeforeCreateの違い。