Vue インスタンスオプション

Vue のオプションは、Options API を使用するときに Vue インスタンスで利用できるさまざまなオプションです。

Vue インスタンスの一般的なオプション：

  • el- Vue インスタンスがマウントされる DOM 要素を指定します。指定しない場合、Vue インスタンスは自動的にマウントされません。

  • data- Vue インスタンスのデータオブジェクトを定義します。Vue インスタンスのテンプレート、算出プロパティ、メソッド、ウォッチャーなどはすべてこのデータにアクセスできます。

  • computed- 算出プロパティを含みます。これらのプロパティの値は依存関係に基づいてキャッシュされ、依存関係が変化したときだけ再計算されます。

  • methods- Vue インスタンスのメソッドを定義します。テンプレート内のイベントリスナーから呼び出すことができます。

  • watch- 1つ以上のウォッチャーを含み、Vue インスタンス内のデータ変更を監視して応答します。

  • props- コンポーネントが受け取る外部データを定義します。

  • components- Vue インスタンス内でカスタムコンポーネントを登録できます。

  • directives- グローバルなカスタムディレクティブの登録を許可します。

  • filters- フィルターを定義します。テンプレート内で使用でき、テキストの書式設定に使用します。

  • model- コンポーネントが使用するカスタム v-model プロパティとイベントを指定します。

  • provide/inject- 依存関係の注入機能を提供し、コンポーネント間でのデータ受け渡しを可能にします。

  • lifecycle hooks- 含むonMounted, onUpdated, onUnmountedなどのライフサイクルフック。Vue インスタンスのさまざまな段階でコードを実行するために使用します。

  • template- Vue インスタンスの HTML テンプレートを定義します。

  • render function- JavaScript 関数を使用してコンポーネントをレンダリングでき、より高度なカスタマイズ機能を提供します。

  • errorCaptured- Vue インスタンスのエラーをグローバルにキャッチするために使用します。

  • emits- コンポーネントがトリガーできるイベントを定義します。

  • setup- Vue 3 の Composition API におけるエントリ関数で、コンポーネントのロジックを整理するために使用します。

el

マウントポイント。Vue インスタンスがマウントされる DOM 要素を指定します：

例

const app = Vue.createApp({
  // options
});
app.mount('#app');

data

  • 型: 関数またはオブジェクト

  • 説明: dataVue インスタンス内でコンポーネントデータを格納する場所です。`data` 内でdataさまざまなデータプロパティを定義し、テンプレート構文を使用してページ上で利用できます。data`data` 内のデータはリアクティブに更新されます。つまり、データが変化すると、関連するページコンテンツが自動的に更新されます。

例

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

computed

  • 型: オブジェクト

  • 説明: computedプロパティを使用すると、リアクティブな依存関係に基づく算出プロパティを宣言できます。算出プロパティは、関連する依存関係が変更された場合にのみ再評価され、計算結果をキャッシュして不要な再計算を避けます。

例

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

methods

  • 型: オブジェクト

  • 説明: methodsプロパティは Vue インスタンス内のメソッドを格納するために使用します。これらのメソッドはテンプレート内で呼び出せるほか、インスタンスの他のメソッド内でも使用できます。算出プロパティとは異なり、メソッドは呼び出しのたびに再実行されるため、イベントへの応答や非同期操作の実行に適しています。

例

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

watch

  • 型: オブジェクトまたは関数

  • 説明: watchプロパティは、Vue インスタンス内のデータ変更を監視して応答するために使用します。監視しているデータが変化すると、指定したコールバック関数が実行されます。非同期処理や複雑なデータ変更ロジックに適しています。

例

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
});

props

  • 型: 配列またはオブジェクト

  • 説明: propsプロパティは、親コンポーネントから子コンポーネントに渡されるデータを受け取るために使用します。子コンポーネントはprops親コンポーネントから渡されたデータを受け取り、コンポーネント内で使用できます。

次の例では、MyComponent が title プロパティを受け取り、テンプレート内でそれを使用します：

例

const MyComponent = {
  props: ['title'],
  template: '<h1>{{ title }}</h1>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello Vue 3!"></my-component>'
});

app.mount('#app');

template

  • 型: 文字列

  • 説明: templateプロパティは Vue コンポーネントのテンプレート構造を定義します。テンプレート内では、補間、ディレクティブ、算出プロパティなどの Vue のテンプレート構文を使用できます。テンプレートは最終的にレンダリング関数にコンパイルされ、コンポーネントの仮想 DOM を生成するために使用されます。

例

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

components

components はローカルコンポーネントを登録するために使用します。

例

const ChildComponent = {
  template: '<div>A child component</div>'
};

const app = Vue.createApp({
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

provide / inject

親コンポーネントがデータを提供し、子コンポーネントが注入して使用します。

例

const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
};

const app = Vue.createApp({
  provide() {
    return {
      message: 'Provided Message'
    };
  },
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

ライフサイクルフック

beforeCreate

インスタンスの初期化前に呼び出されます。

例

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate');
  }
}).mount('#app');

created

インスタンスの作成が完了した後に呼び出されます。

例

const app = Vue.createApp({
  created() {
    console.log('created');
  }
}).mount('#app');

beforeMount

マウント前に呼び出されます。

例

const app = Vue.createApp({
  beforeMount() {
    console.log('beforeMount');
  }
}).mount('#app');

mounted

インスタンスのマウントが完了した後に呼び出されます。

例

const app = Vue.createApp({
  mounted() {
    console.log('mounted');
  }
}).mount('#app');

beforeUpdate

データの更新前に呼び出されます。

例

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}).mount('#app');

updated

データの更新後に呼び出されます。

例

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  updated() {
    console.log('updated');
  }
}).mount('#app');

beforeUnmount

インスタンスのアンマウント前に呼び出されます。

例

const app = Vue.createApp({
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}).mount('#app');

unmounted

インスタンスのアンマウント後に呼び出されます。

例

const app = Vue.createApp({
  unmounted() {
    console.log('unmounted');
  }
}).mount('#app');

その他のオプション

directives

ローカルディレクティブを登録します。

例

const app = Vue.createApp({
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  },
  template: '<input v-focus>'
}).mount('#app');

mixins

ミックスインオブジェクト。

例

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
}).mount('#app');

extends

別のコンポーネントを拡張します。

例

const BaseComponent = {
  created() {
    console.log('BaseComponent created');
  }
};

const app = Vue.createApp({
  extends: BaseComponent,
  created() {
    console.log('Extended component created');
  }
}).mount('#app');

inheritAttrs

親コンポーネントの attribute を継承するかどうか。

例

const MyComponent = {
  inheritAttrs: false,
  props: ['title'],
  template: '<div><h1>{{ title }}</h1></div>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello" id="app"></my-component>'
}).mount('#app');

setup

Composition API に使用します。

例

const app = Vue.createApp({
  setup() {
    const message = Vue.ref('Hello Vue 3!');
    return { message };
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app');

expose

Vue 3 の Composition API では、setup 関数を使用してコンポーネントのロジックを定義するとき、expose メソッドを使用して外部に公開するプロパティとメソッドを明示的に指定できます。

以下は、expose を使用して Vue 3 コンポーネントでプロパティとメソッドを公開する方法を示す簡単な例です：

親コンポーネント (ParentComponent.vue)

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);

    const callChildMethod = () => {
      if (child.value) {
        child.value.exposedMethod();
      }
    };

    return {
      child,
      callChildMethod
    };
  }
};
</script>

子コンポーネント (ChildComponent.vue)

<template>
  <div>
    <p>{{ exposedData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(_, { expose }) {
    const exposedData = ref('Hello from Child Component');
   
    const exposedMethod = () => {
      console.log('Child component method called');
    };

    expose({
      exposedData,
      exposedMethod
    });

    return {
      exposedData
    };
  }
};
</script>

説明：

  1. 親コンポーネント:

    • 親コンポーネントでは、`ref` を使用してref子コンポーネントへの参照を作成しています。child。
    • にcallChildMethodメソッド内では、`ref` を通じてchild.value子コンポーネントのインスタンスにアクセスし、子コンポーネントが公開したメソッドを呼び出します。exposedMethod。

  2. 子コンポーネント:

    • 子コンポーネントのsetup関数内で、`ref` を使用してrefリアクティブなデータを作成し、exposedData。
    • メソッドを定義し、exposedMethodメソッドの公開方法を示します。
    • `expose` メソッドを使用してexpose明示的に公開し、exposedDataとexposedMethod親コンポーネントに公開します。
    • `message` を返し、exposedDataテンプレート内で使用できるようにします。
その他の拡張