【Vue.js】createdとmountedの違い

createdとmountedの違い

前提

ライフサイクルというものが何なのか理解するのが最初は非常に難しいらしい
利用頻度の高いcreated, mountedで何が行われるのかと2つの区別がはっきりつけばライフサイクルの理解が進むかも

結論

created：インスタンス初期化時、DOMが生成される前
mounted：インスタンス初期化時、DOMが生成された後

ライフサイクルフックとは

• vue.jsの初期化の中の決められたタイミングで実行される関数
• created, mountedもライフサイクルフックの中の2つ
• 各ライフサイクルフックの中にプログラムを記述することでvue.jsの初期化の流れの中で記述したプログラムを必ず実行させることができる

本題

elの中身を知る

elはvue.jsインスタンスがマウントを行う要素で、elを指定した要素の中でだけvue.jsを動かすことができる

vueコンポーネント

<div id="app">
  <h1>Hello World</h1>
  <button v-on:click="showEl">show el</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
  },
  methods:{
    showEl : function(){
      console.log(this.$el) //this.$elをでelの中身が確かめられる
    }
  }
})
</script> 

elの中身 = elはnew Vueインスタンスで指定した要素そのもの

  <div id="app">
    <h1>Hello World</h1>
    <button v-on:click="showEl">show el</button>
  </div>

createdとmountedの違い

createdとmountedの違いは下記のように説明されている

createdはDOMがまだ作られていない状態で、mountedではDOMが作成された直後の状態である

以下で確認

new Vue({
  el: '#app',
  data: {
  },
  created : function(){
    console.log('created')
    console.log(this.$el)
  },
  mounted : function(){
    console.log('mounted')
    console.log(this.$el)
  }
})

createdではDOMが作成されていないので、this.$elはundefinedとなっており、mountedではDOMの作成が完成していることが確認できた

よって

createdではDOMの取得ができない
mountedではDOMの取得ができ流ので、ここからDOM操作が行える

createdでは何が完了しているのか

今度はthisを使ってVueインスタンスそのものを確認する

  el: '#app',
  data: {
    message : 'Hello World'
  },
  created : function(){
    this.message = 'Hello Vue'
    console.log('created')
    console.log(this)
  }

dataオブジェクトがリアクティブになっているので、
createdの中でデータプロパテにデータを挿入することは可能

createdとbeforeCreateの違い

beforeCreateでは、dataの中身を確認することができますが、createdのようにmessageの上書きを行うことはできない

beforeCreateでインスタンスの作成が完了、dataオブジェクトがリアクティブになっていないという説明を受けても理解することができる

理解が深まったこと

• elの理解
• beforeCreate, created, mountedのライフサイクルフックの違い

参考