LoginSignup
30

More than 3 years have passed since last update.

Vue.js ライフサイクルフック概要

Last updated at Posted at 2020-04-10

Vue.jsのインスタンスライフサイクルおよびライフサイクルフックの概要(学習記録)。

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

Vue.jsには、インスタンスの生成から破棄までの間に実行される関数がいくつか存在する。これらの関数をライフサイクルフックと呼ぶ。

ライフサイクル

Vueインスタンスが生成されてから破棄されるまでの流れ

1.生成・初期化

  • Vueインスタンス生成後に初期化処理を行う。
  • リアクティブデータ(data)の初期化
    • dataの更新が画面の表示と同期されるようになる。
    • 対応関数:beforeCreate,created

2.マウント

  • コンポーネントをDOMにマウント(VueインスタンスとDOMが紐付け)する。
  • Vueインスタンスがelオプションが指定されているかを確認する。
    • 指定がある場合:次のフェーズへ移行する。
    • 指定がない場合:mount関数が実行されたタイミングで、次のフェーズに移行する。
  • templateオプションを持っているかを確認。
    • 持っている場合:templaterender関数にコンパイルされる。
    • 持っていない場合:elオプションで定義されたDOMをtemplateとしてコンパイルする。
  • マウント(インスタンスのelementを作成し、elオプションに置換)する。
  • 対応関数:beforeMount,mounted

3.データ/画面の更新

  • 画面が表示されている状態。
  • データが変更されると、render関数が実行され再描画が行われる。
  • 対応関数:beforeUpdate,updated

4.インスタンスの破棄

  • インスタンスは画面遷移などで描画されなくなるタイミングで破棄される。
  • 対応関数:beforeDestroy,destroyed

beforeCreate

  • インスタンスの初期化前に実行される。
  • プロパティdataにアクセスしようとしても、undefinedとなる。
new Vue({
  data: {
    test: 1
  },
  beforeCreated() {
    console.log('TEST: ' + this.test)
  }
})
// => "TEST:undefined"

created

  • インスタンスの初期化後に実行される。
  • プロパティdataにアクセスすることができる。
  • マウントに必要なデータを取得・設定する(APIを用いたデータ取得処理、DOMへのマウントが完了して画面が描画されるまでのローディング表示など)時に使用する。
new Vue({
  data: {
    test: 1
  },
  created() {
    console.log('TEST:' + this.test)
  }
})
// => "TEST:1"

beforeMount

  • elementへのマウント前に実行される。
  • Vueelementに置き換わる前のelement要素にアクセスする処理を書く。
<template>
  <div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
  data(){
    return{
      test:""
    },
  },
  beforeMount() {
    this.test = "beforeMount"
  }
})
</script>
/ => "TEST:"(表示されない)

mounted

  • elementへのマウント後に実行される。

  • templateにアクセスできるようになる。

<template>
  <div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
  data(){
    return{
      test:""
    }, 
  },
  mounted() {
    this.test = "mounted"
  }
})
</script>

beforeUpdate

  • データ(プロパティ)更新時の再描画(rerender)前に実行される。
  • 再描画前のDOM要素の取得処理を書く。
  • 更新後の値が取得される。
<template>
  <div id="app">TEST:{{test}}</div>
</template>

<script>
new Vue({
  data(){
   return {
     test:"test"
   }
  },

  mounted(){
    this.test = "mounted"
  },

  beforeUpdate(){
    console.log("beforeUpdate:",this.test) // beforeUpdate:mounted 
    console.log(this.$el) // <div>TEST:mounted</div>
  },
)};
</script>

updated

  • データ更新時の再描画後に実行される。
  • 再描画したDOMに対しての初期処理を書く。
  • updated内で状態更新処理を書くと無限ループになる可能性あり。
<template>
  <div id="app">TEST:{{test}}</div>
</template>

<script>
export default {
  data(){
   return {
     test:"test"
   }
  },

  mounted(){
    this.test = "mounted"
  },

  updated(){
    console.log("updated", this.test) // updated:mounted
    console.log(this.$el) // <div>TEST:mounted</div>
  }
};
</script>

beforeDestroy

  • インスタンスが破棄される前に実行される。
    • ページ遷移をする際に、そのページのインスタンスは破棄される。
  • インスタンス破棄前にクリアしなければいけない処理がある場合に使用する。
    • Vueインスタンスの要素に別のインスタンスを紐付けた場合など。

destroyed

  • インスタンスが破棄された後に実行される。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30