ライフサイクルとは

難しい言葉に聞こえてますよね。私も横文字が苦手なので、学生の頃は世界史が苦手でした。
そんな私的な解釈でいうと、ライフサイクルとはVueアプリケーションが作成されるまでの過程のことだと解釈しています。

例えば人間でも傷をした時、治るまでには血液がこれ以上流れないように固まっていき、やがてかさぶたになり、最終的に元の皮膚と変わらないくらいまでに治るという、人間の素晴らしい機能の連鎖によって新しい皮膚が作られます。

Vueもいろんな機能の連鎖によって、新しくアプリケーションが作られるのですが、その過程ごとにできることが異なります。
そして、その過程の中のフェーズやそのタイミングによってできることを、ライフサイクルフックといいます。

今回は、それらの違いをみていく記事になります。

Vue.jsのライフサイクルフック一覧

フック名	フックが呼ばれるタイミング	アクセス可能	アクセス不可能
beforeCreate	インスタンスが生成され、データが初期化される前
created	インスタンスが生成され、データが初期化された後	メソッド、プロパティ	エレメント
beforeMount	インスタンスが、DOM要素にマウントされる前
mounted	インスタンスが、DOM要素にマウントされた後	メソッド、プロパティ、エレメント
beforeUpdate	データが変更され、DOMに適用される前
updated	データが変更され、DOMに適用された後
beforeDestroy	Vueインスタンスが破棄される前
destroyed	Vueインスタンスが破棄された後

※随時、アクセス可能なことなど追記していきます

メソッドの値やエレメントの存在による、フックタイミングの比較

ページロード完了時

<body>
  <div id="app">
    <h1>Hello, world</h1>
    <button v-on:click="showEl">show!!</button>
  </div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  methods: {
    showEl: function () {
      this.message = 'Good night'
      console.log(this.message)
      console.log(this.$el)
    }
  }
})
</script>
</body>

// this.messageの中身
Good night

// this.$elの中身
<div id="app">
  <h1>Hello, world</h1>
  <button>show!!</button>
</div>

beforeCreate時


<body>
  <div id="app">
    <h1>Hello, world</h1>
    <button v-on:click="showEl">show!!</button>
  </div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  beforeCreate: {
    showEl: function () {
      this.message = 'Good night'
      console.log(this.message)
      console.log(this.$el)
    }
  }
})
</script>
</body>


// this.messageの中身
Hello world

// this.$elの中身
undefined

created時


<body>
  <div id="app">
    <h1>Hello, world</h1>
    <button v-on:click="showEl">show!!</button>
  </div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  created: {
    showEl: function () {
      this.message = 'Good night'
      console.log(this.message)
      console.log(this.$el)
    }
  }
})
</script>
</body>

// this.messageの中身
Good night

// this.$elの中身
undefined

mounted時


<body>
  <div id="app">
    <h1>Hello, world</h1>
    <button v-on:click="showEl">show!!</button>
  </div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  mounted: {
    showEl: function () {
      this.message = 'Good night'
      console.log(this.message)
      console.log(this.$el)
    }
  }
})
</script>
</body>

// this.messageの中身
Good night

// this.$elの中身
<div id="app">
  <h1>Hello, world</h1>
  <button>show!!</button>
</div>

番外編：Nuxt.jsのフック

フック名	フックが呼ばれるタイミング	記述内容	Vueインスタンスのdata
asyncData	ページがロードされる前	APIの呼び出しなどの非同期通信	dataとマージする
fetch	ページがロードされる前	APIの呼び出しなどの非同期通信	dataとマージしない

【Vue.js】横文字苦手だけど、ライフサイクルフックについて比較してみた