why

React の componentDidMount などとは違った Vue のライフサイクルのタイミングメソッドを整理したくなった。

各ライフサイクルとタイミング

とりあえず全部 console に出す

beforeCreate, created, BeforeMount, moutend, beforeDestory

これを実際の Vue アプリで呼んでみる

    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeDestroy() {
      console.log('beforeDestory');
    },

このように子供コンポーネントの各メソッドで各自の名前をconsole.log に出すと

[HMR] Waiting for update signal from WDS...
Modal.vue?2d36:47 beforeCreate
Modal.vue?2d36:50 created
Modal.vue?2d36:53 beforeMount
Modal.vue?2d36:56 mounted

ちゃんと順番に呼ばれる。

デストロイはされないから呼ばれない。

用途を整理する

created 以降: data の計算

基本的に data の計算は created 以降でアクセスできる。

実は computed を使えばもっと先にもアクセスできる。

data に realName, nickName, を定義する

これを各自のライフサイクルで呼ぶと

Modal.vue?2d36:47 beforeCreate
Modal.vue?2d36:48 this.realName: undefined
Modal.vue?2d36:51 created
Modal.vue?2d36:52 this.realName: default
Modal.vue?2d36:55 beforeMount
Modal.vue?2d36:56 this.realName: default

created の前では定義した data は取れないことがわかった。

computed: 例外的に created の直前でも data の計算ができる

data に

        FamilyName: 'Yamada',
        FirstName: 'Taro',

を定義して

computed に

    computed: {
      fullName() {
        return this.FamilyName + this.FirstName
      } 
    },

二つを加算する結果を返す結果を定義して

console.log でまた出力すると

Modal.vue?2d36:49 beforeCreate
Modal.vue?2d36:50 this.fullName: undefined
Modal.vue?2d36:53 created
Modal.vue?2d36:54 this.fullName: YamadaTaro

同様にして、created の時には計算されているのがわかる

それどころか created の前に計算できた。data にもアクセスできる。

mouted 以降: エレメントへのアクセス

mount とは、HTML の div id=app の Vue での置換だと解釈している。

    created() {
      console.log('created');
      console.log(`this.el: ${this.$el}`);
    },
    beforeMount() {
      console.log('beforeMount');
      console.log(`this.el: ${this.$el}`);
    },
    mounted() {
      console.log('mounted');
      console.log(`this.el: ${this.$el}`);
    },

このように、エレメントに各ライフサイクルでアクセスしてみると

Modal.vue?2d36:49 beforeCreate
Modal.vue?2d36:81 computed worked
Modal.vue?2d36:52 created
Modal.vue?2d36:53 this.el: undefined
Modal.vue?2d36:56 beforeMount
Modal.vue?2d36:57 this.el: undefined
Modal.vue?2d36:60 mounted
Modal.vue?2d36:61 this.el: [object HTMLDivElement]

mouted されてから、ようやく html div element にアクセスできている。

具体的にエレメントにアクセスする時はどういう時かは、後日実例を書く。

beforeUnmount, unmount, beforeDestroy

確実に潰さないと UX を大きく損ねるものを潰す。

どこで動いているかは未検証

beforeUpdate, updated

変更を行う直前とその後に走る。

これで状態変化を行うと循環参照で無限ループになってしまう。

なので watcher や、使うものの変化を検知して更新できる computed の方が汎用性が高い感想。

KAEDE Hack blog

JavaScript 中心にライブラリなどの使い方を解説する技術ブログ。

Vue.js LifeCycle -- created, mounted, computed, watched, beforeRouteLeave, beforeDestroy

why