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

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

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

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


#### ライフサイクル

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

**1.生成・初期化**

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

**2.マウント**

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

**3.データ/画面の更新**

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

**4.インスタンスの破棄**

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

### beforeCreate

* インスタンスの初期化前に実行される。
* プロパティ`data`にアクセスしようとしても、`undefined`となる。

```vue
new Vue({
  data: {
    test: 1
  },
  beforeCreated() {
    console.log('TEST: ' + this.test)
  }
})
// => "TEST:undefined"
```

### created

* インスタンスの初期化後に実行される。
* プロパティ`data`にアクセスすることができる。
* マウントに必要なデータを取得・設定する(APIを用いたデータ取得処理、DOMへのマウントが完了して画面が描画されるまでのローディング表示など)時に使用する。

```vue
new Vue({
  data: {
    test: 1
  },
  created() {
    console.log('TEST:' + this.test)
  }
})
// => "TEST:1"
```



### beforeMount

* `element`へのマウント前に実行される。
* `Vue`の`element`に置き換わる前の`element`要素にアクセスする処理を書く。

```vue
<template>
  <div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
  data(){
    return{
      test:""
    },
  },
  beforeMount() {
    this.test = "beforeMount"
  }
})
</script>
/ => "TEST:"(表示されない)
```

### mounted

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

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

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

### beforeUpdate

* データ(プロパティ)更新時の再描画(`rerender`)前に実行される。
* 再描画前のDOM要素の取得処理を書く。
* 更新後の値が取得される。

```vue
<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`内で状態更新処理を書くと無限ループになる可能性あり。

```vue
<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

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

### 参考
* [Vue インスタンス](https://jp.vuejs.org/v2/guide/instance.html)
* [【Vue.js】ライフサイクルフックの基本を利用方法と共に解説！](https://b1tblog.com/2019/10/18/vue-lifecycle/)
* [【Vue.js】Vueに慣れてきたら知っておきたいライフサイクルフックの使い分け](https://greko-engineer.hateblo.jp/entry/2019/12/21/183509)
* [《初心者向け》Vue.jsのライフサイクルとは？](https://katuo-ai.com/vue-lifecycle/)