Vue コンポーネントインスタンス

Vue.js において、コンポーネントインスタンスは Vue アプリケーションの最も基本的な構成要素の一つです。各コンポーネントインスタンスは Vue コンポーネントであり、独自のテンプレート、データ、メソッド、ライフサイクルフックを持ち、自身の状態と動作を独立して管理できます。以下は Vue コンポーネントインスタンスに関する詳細な紹介です。

Vue コンポーネントインスタンスの作成

Vue.js では、コンポーネントインスタンスは通常、createApp メソッドとコンポーネントオプションオブジェクトを使用して作成します。

コンポーネントオプションオブジェクトには、次のプロパティを含めることができます：

  • data: データオブジェクト。コンポーネントのリアクティブデータを保存するために使用されます。
  • props: プロパティ（props）の配列またはオブジェクト。親コンポーネントから渡されたデータを受け取るために使用されます。
  • computed: 算出プロパティオブジェクト。リアクティブな依存関係に基づいて動的に計算されます。
  • methods: メソッドオブジェクト。コンポーネント内の関数と操作を含みます。
  • watch: ウォッチャーオブジェクト。データの変更を監視し、応答するために使用されます。
  • template: 文字列。コンポーネントのテンプレート構造を定義します。
  • render: 関数。コンポーネントの仮想 DOM をレンダリングするために使用されます。
  • setup: 関数。コンポーネントの初期状態、データ、算出プロパティ、ウォッチャーなどを設定するために使用されます（Vue 3 の場合）。

以下は、Vue コンポーネントインスタンスの簡単な例です：

インスタンス

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

app.mount('#app');

説明：

  • data関数は、... プロパティを含むオブジェクトを返します。messageこのオブジェクトは、コンポーネントの状態を保存するために使用されます。
  • methodsオブジェクトには、... メソッドが含まれています。greetボタンをクリックすると、アラートボックスがポップアップし、...messageの内容を表示します。
  • template文字列はコンポーネントのテンプレート構造を定義し、補間とイベントバインディングを使用してデータの表示とインタラクションを実装しています。

ライフサイクルフック

Vue コンポーネントインスタンスには、開発者がコンポーネントのライフサイクルの異なる段階でカスタムロジックを実行できるようにするいくつかのライフサイクルフック関数があります。一般的なライフサイクルフックには、...created、mounted、updatedとdestroyedなどがあります。

インスタンス

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

コンポーネント通信

Vue コンポーネントインスタンス間では、props、events、provide/inject、$parent/$children、$attrs/$listeners などを通じて通信します。具体的な方法は、コンポーネントの関係とニーズによって異なります。これらのメカニズムにより、コンポーネントは異なる階層間でデータを渡したり、ユーザーの操作に応答したりすることができます。

コンポーネントインスタンスのプロパティ

$data

$data プロパティには、コンポーネントインスタンスのすべてのデータプロパティが含まれます。これはリアクティブであり、データが変更されると関連するビューが自動的に更新されます。

インスタンス

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props

$props プロパティには、親コンポーネントから現在のコンポーネントに渡されたすべての属性（props）が含まれます。これは読み取り専用です。

インスタンス

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  }
};
</script>

インスタンス

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Message from parent'
  }
};

$refs

$refs には、コンポーネント内で ref 属性を持つすべての DOM 要素または子コンポーネントインスタンスが含まれます。$refs を介してこれらの要素やコンポーネントインスタンスにアクセスできます。

インスタンス

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // DOM 要素にアクセス
this.$refs.inputField.focus(); // DOM 要素のメソッドを呼び出す
  }
}
</script>

$el プロパティは、現在のコンポーネントインスタンスのルート DOM 要素を表します。このプロパティは、コンポーネントがマウントされた後にのみアクセスできます。

インスタンス

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Hello, Vue!</div>

$attrs

$attrs には、親コンポーネントから現在のコンポーネントに渡されたが、子コンポーネントで宣言されていないすべての属性が含まれます。これらの属性は、子コンポーネントに追加の非 prop 属性を渡すために使用できます。

インスタンス

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners

$listeners には、親コンポーネントから現在のコンポーネントに渡されたすべてのリスナー（イベントハンドラー）が含まれ、コンポーネントのルート要素や他の要素に直接バインドできます。

インスタンス

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Click me</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

コンポーネントインスタンスのメソッド

$mount()

$mount() メソッドは、Vue コンポーネントを DOM 要素に手動でマウントします。Vue 3 では、通常は createApp().mount() によって自動的にマウントされますが、まれに手動でのマウントが必要です。

インスタンス

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');

$destroy()

$destroy() メソッドは、現在のコンポーネントインスタンスを破棄し、そのすべてのイベントリスナーをバインド解除して、占有しているリソースを解放します。これは、コンポーネントを動的に作成および破棄する場合など、特定のシナリオで役立ちます。

インスタンス

vm.$destroy();

$emit()

$emit() メソッドは、現在のコンポーネントインスタンスでカスタムイベントをトリガーし、データを親コンポーネントに渡すために使用されます。通常は v-on ディレクティブと組み合わせて使用します。

インスタンス

<button @click="$emit('custom-event', eventData)">Click me</button>

$nextTick()

$nextTick() メソッドは、次の DOM 更新サイクルが終了した後に指定されたコールバック関数を実行します。DOM の更新後に何らかの操作を実行するために使用されます。

インスタンス

vm.$nextTick(() => {
  // DOM の更新完了後に実行する操作
});

$watch()

$watch() メソッドは、コンポーネントインスタンス上のデータ変更を監視し、データが変更されたときに指定されたコールバック関数を実行するために使用されます。

インスタンス

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Message changed from ${oldValue} to ${newValue}`);
});

これらのプロパティとメソッドにより、Vue コンポーネントインスタンスは豊富な機能と柔軟性を持ち、複雑なアプリケーションを構築する際の開発者のさまざまなニーズを満たすことができます。データ管理からイベント処理、動的コンポーネントの操作まで、すべてコンポーネントインスタンスを通じて管理および制御できます。

その他の拡張