Vue.jsのcreatedとmounted: タイミングと使い分けをコード例で解説

Vue.jsのcreatedとmountedの違いをコード例を交えて説明します。

まず、createdはVueインスタンスやコンポーネントが作成された直後に呼び出されます。これはデータの初期化やメソッドのセットアップなど、インスタンスの初期化段階での処理に適しています。以下はcreatedの例です。

Vue.component('example-component', {
  created() {
    console.log('Component created');
    // コンポーネントが作成された直後に実行される処理を記述
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

次に、mountedはコンポーネントがDOMにマウントされた後に呼び出されます。つまり、DOM要素にアクセスするための処理や、外部リソースの読み込みなど、DOMへのアクセスが必要な操作に適しています。以下はmountedの例です。

Vue.component('example-component', {
  mounted() {
    console.log('Component mounted');
    // コンポーネントがDOMにマウントされた後に実行される処理を記述
    this.$nextTick(() => {
      // DOMが更新された後に処理を実行したい場合は$nextTickを利用する
      console.log('DOM updated');
    });
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

createdとmountedの違いをまとめると、createdはコンポーネントが作成された直後に、データの初期化やメソッドのセットアップなどの初期化処理を行うのに適しています。一方、mountedはコンポーネントがDOMにマウントされた直後に、DOM要素へのアクセスが必要な処理を行うのに適しています。

このように、createdとmountedはそれぞれ特定のタイミングで実行されるため、それぞれの適切な使い方を理解することが重要です。