1.はじめに

今回は、第四弾でVue.jsの基本的な操作のうちscriptの部分に記述する部分をいくつかまとめていきます。

2.基本的な書き方

概要

<template>
  <!-- HTMLを書く場所：画面に表示する内容 -->
</template>

<script>
// 今回はこちらの中に書くことをまとめていきます。
export default {
  // JavaScriptを書く場所：動きやデータの処理を書く
};
</script>

<style>
/* CSSを書く場所：見た目のデザインを設定 */
</style>

今回は下記の概念についてまとめていきます。

項目	説明
mounted	部品が画面に表示された直後の動き
created	部品が作られた直後（画面に出る前）の動き

①mounted

mountedとは、Vueのコンポーネントが画面に描画され、DOM（HTMLの実際の要素）が使える状態になった時 に一度だけ実行される処理を書く場所です。
APIからデータを読み込むなど、画面表示後にやりたいことをここに書きます。

＜基本的な書き方＞

mounted() {
  // 画面が表示されたあとに1回だけ実行される
}

＜テストコード＞

<template>
  <div>
    <h2>初期表示チェック：{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "まだ更新されていません"
    };
  },
  mounted() {
    this.message = "mountedで書き換えました！";
  }
};
</script>

初期状態では message の内容が「まだ更新されていません」となっています。
（素早く切り替わってしまうため、console.logの状態を表示しています。）

画面が表示された直後、自動的に mounted() が呼ばれ、message が「mountedで書き換えました！」に変更されるようになります。

⑤created

createdとは、Vueのコンポーネントが生成された直後（画面表示前）に一度だけ実行される処理を書く場所です。
データの初期化やAPI取得などを「表示前」に行いたいときに便利です。

＜基本的な書き方＞

created() {
  // コンポーネントが生成されたタイミングで1回だけ実行される
}

🔍mountedとの違い
createdとmoutedとの違いは、画面の要素にアクセスできるかできないかの違いになります。

<template>
  <div>
    <h2 ref="title">タイトルです</h2>
  </div>
</template>

<script>
export default {
  created() {
    // まだ画面（DOM）は表示されていない
    console.log("✅ created の中の this.$refs.title:", this.$refs.title);
    // → undefined
  },
  mounted() {
    // 画面が表示されたあとなのでDOMにアクセスできる
    console.log("✅ mounted の中の this.$refs.title:", this.$refs.title);
    // → <h2>要素が表示される

    // 実際に操作してみよう：タイトルを赤くする
    this.$refs.title.style.color = "red";
  }
};
</script>

created では HTML（h2）の要素ははまだ描画前なので this.$refs.title は undefinedになり、mounted では HTMLがすでに画面に表示済みなので this.$refs.title は h2の要素として取得できるため、画面の要素に対する操作（色を変えるなど）ができます（created内に書くとエラーになります。）。

＜テストコード＞

<template>
  <div>
    <h2>createdで設定したメッセージ：{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  created() {
    this.message = "createdで初期化しました";
  }
};
</script>

created() の中で message を初期化しているため、画面が表示される前に message がセットされます。
画面には「createdで初期化しました」と最初から表示されます。

4.さいごに

今回はmounted・createdを紹介しました。
次回はcssタグ内に書くことをまとめていきたいと思います。