Vue.js/ライフサイクル

初期データをいじりたい

const app = Vue.createApp({
  data() {
    return {
      rows: [
        { id: 1, name: 'Taro', age: 5, country: 'Japan' },
        { id: 2, name: 'Jiro', age: 3, country: 'Japan' },
        { id: 3, name: 'John', age: 15, country: 'U.K.' },
        { id: 4, name: 'Michael', age: 8, country: 'U.S.A.' },
        { id: 5, name: 'Martín', age: 24, country: 'Spain' },
        { id: 6, name: 'Miguel', age: 5, country: 'Mexico' },
      ],
      japaneseAdultAge: 18
    }
  }
});
app.mount('#list');

例によってデータを詰めたVueのAppを用意しました。このrowsの部分はよそのシステムやデータベースが出力したJSON的なものだったりして、事前に手を加えられません（という仮定）。ここで名前と年齢と国籍のデータに加えて「成人しているかどうか」という情報を事前に追加しておきたくなりました。japaneseAdultAgeというデータがついているので、必要になったらその都度計算すれば成人した日本人かどうかは判別できそうです。でも、頻繁に必要になってくる項目なので、あらかじめ成人してるかどうか計算しておいてあげると、計算量を減らせそうです。

const app = Vue.createApp({
  data() {
    return {
      rows: this.attachAdult([ { id: 1, name: 'Taro', age: 5, country: 'Japan' }, ... ],
      japaneseAdultAge: 18
    }
  }
  methods: {
    attachAdult(rows) {
      rows.forEach( r => {
        if (r.country == 'Japan') {
          r.adult = r.age >= this.japaneseAdultAge ? 'Adult' : 'Child'; // Error!
        } else {
          r.adult = 'Unkhown';
        }
      }
    }
  }
});
app.mount('#list');

最初methodsに成人判別処理を書いて、手を加えたものをdataに突っ込んだらいいのかなと思ったのですが、メソッドの途中でjapaneseAdultAgeを参照しようとしたら、エラーがでました。そうかcreateAppが済んでないので、thisにデータがまだ詰まってないのか。

ライフサイクル

ここでcreateApp中にattachAdultメソッドで成型するのを諦めてみました。といっても、computed部でその都度成型するのは無駄が多すぎます。そこでライフサイクルというアイディアを導入してみました。

ライフサイクル表

beforeCreate: 初期化時に実行される
created: 初期化後に実行される
beforeMount: マウント時に実行される
mounted: マウント後に実行される
beforeUpdate: DOMツリー更新前に実行される
updated: DOMツリー更新後に実行される
beforeUnmount: アンマウント前に実行される
unmounted: アンマウント後に実行される
errorCaptured: エラーをキャプチャーしたときに実行される
renderTracked: リアクティブな依存関係が追加されたときに実行される
renderTriggered: レンダリングされるときに実行される
activated: コンポーネントがDOMに追加されたときに実行される
serverPrefetch: サーバーサイドのレンダリング前に実行される

後半、正しく理解していないものもありますがVueのコンポーネントやアプリが生まれて死ぬまでに起きるイベントに応じてトリガーされる関数を設定できるようです。
今回はVue.createAppでdate部が揃ったあと実行したいのでcreatedイベントがよさそうです。

const app = Vue.createApp({
  data() { .. },
  methods: { .. },
  created() {
    this.rows.forEach( r => {
      if (r.country == 'Japan') {
        r.adult = r.age >= this.japaneseAdultAge ? 'Adult' : 'Child'; // OK!
      } else {
        r.adult = 'Unkhown';
      }
    }
  }
});
app.mount('#list');

data, computed, methods などに並べてら合いライフタイムイベント名の関数を描くだけでよいようです。
これで事前にデータを整形できました！

Vue.js記事一覧

2023-06-15 19:25:50