Vue3 オプション API

以下の API は Vue のオプション API で広く使用され、状態、ライフサイクル、スロット、依存関係の注入などの機能を管理します。

1. 状態オプション

番号 API ＆ 説明 インスタンス
1 data
コンポーネントのデータオプション。コンポーネントの状態を定義するために使用します。		 data() { return { count: 0 }; }
2 props
コンポーネントの props オプション。親コンポーネントから子コンポーネントに渡されるデータを定義します。		 props: { msg: String }
3 computed
計算プロパティ。コンポーネントの状態（data、props）に基づく派生値を定義するために使用します。		 computed: { doubledCount() { return this.count * 2; } }
4 methods
コンポーネントのメソッドオプション。コンポーネントのビジネスロジックを定義するために使用します。		 methods: { increment() { this.count += 1; } }
5 watch
コンポーネントのリアクティブデータの変化を監視し、コールバックを実行します。		 watch: { count(newVal) { console.log(newVal); } }
6 emits
コンポーネントがトリガーできるカスタムイベントを定義します。		 emits: ['update']
7 expose
親コンポーネントがアクセスできるように明示的に公開するプロパティまたはメソッド。		 expose() { return { method } }

2. レンダリングオプション

番号 API ＆ 説明 インスタンス
1 template
コンポーネントの HTML テンプレートを定義します。		 <template><button @click="increment">{{ count }}</button></template>
2 render
テンプレートの代わりにレンダリング関数を使用します。		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
テンプレートコンパイラのオプションを構成します。		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
コンポーネントのスロットを定義します。		 <slot></slot>

3. ライフサイクルオプション

番号 API ＆ 説明 インスタンス
1 beforeCreate
コンポーネントがインスタンス化される前に呼び出されます。		 beforeCreate() { console.log('Before Create') }
2 created
コンポーネントインスタンスが作成された後に呼び出されます。データが設定されています。		 created() { console.log('Created') }
3 beforeMount
DOM にマウントされる前に呼び出されます。テンプレートがコンパイルされています。		 beforeMount() { console.log('Before Mount') }
4 mounted
コンポーネントが DOM にマウントされた後に呼び出されます。		 mounted() { console.log('Mounted') }
5 beforeUpdate
データが変更された後、コンポーネントが再レンダリングされる前に呼び出されます。		 beforeUpdate() { console.log('Before Update') }
6 updated
コンポーネントの更新が完了した後に呼び出されます。		 updated() { console.log('Updated') }
7 beforeUnmount
コンポーネントがアンマウントされる前に呼び出されます。		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
コンポーネントがアンマウントされた後に呼び出されます。		 unmounted() { console.log('Unmounted') }
9 errorCaptured
子コンポーネントのエラーをキャプチャしたときに呼び出されます。		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
リアクティブデータが変更され、再レンダリングされるときに呼び出されます。		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
リアクティブデータが再レンダリングをトリガーしたときに呼び出されます。		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
コンポーネントがアクティブ化されたときに呼び出されます（keep-aliveコンポーネントのみ）。		 activated() { console.log('Activated') }
13 deactivated
コンポーネントが非アクティブ化されたときに呼び出されます（keep-aliveコンポーネントのみ）。		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
サーバーサイドレンダリング時にデータを取得するフック。		 serverPrefetch() { return fetchData() }

4. コンポジションオプション

番号 API ＆ 説明 インスタンス
1 provide
依存関係を子孫コンポーネントに提供します。		 provide('key', 'value')
2 inject
祖先コンポーネントから依存関係を注入します。		 inject('key')
3 mixins
ロジックを再利用するために外部ミックスイン（Mixin）を導入します。		 mixins: [myMixin]
4 extends
コンポーネントが別のコンポーネントのオプションを拡張します。		 extends: MyComponent

5. その他の雑多な項目

番号 API ＆ 説明 インスタンス
1 name
コンポーネントの名前。通常はデバッグに使用します。		 name: 'MyComponent'
2 inheritAttrs
親コンポーネントの属性（attrs）をルート要素に自動的に継承するかどうかを制御します。		 inheritAttrs: false
3 components
ローカルコンポーネントを登録し、現在のコンポーネントで使用できるようにします。		 components: { LocalComponent }
4 directives
ローカルディレクティブを登録し、現在のコンポーネントで使用できるようにします。		 directives: { focus: FocusDirective }

6. コンポーネントインスタンス

番号 API ＆ 説明 インスタンス
1 $data
コンポーネントのデータオブジェクトを取得します。		 this.$data.count
2 $props
コンポーネントの props オブジェクトを取得します。		 this.$props.msg
3 $el
コンポーネントがマウントされている DOM 要素を取得します。		 this.$el
4 $options
コンポーネントの構成オプションを取得します。		 this.$options.name
5 $parent
親コンポーネントのインスタンスを取得します。		 this.$parent
6 $root
ルートコンポーネントのインスタンスを取得します。		 this.$root
7 $slots
コンポーネントのスロットコンテンツを取得します。		 this.$slots.default
8 $refs
コンポーネントの参照オブジェクトを取得します。		 this.$refs.input
9 $attrs
コンポーネントの props にバインドされていないすべての属性を取得します。		 this.$attrs
10 $watch()
コンポーネントインスタンスのリアクティブデータまたは計算プロパティを監視します。		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
カスタムイベントをトリガーします。		 this.$emit('update', newVal)
12 $forceUpdate()
Vue にコンポーネントを強制的に再レンダリングさせます。		 this.$forceUpdate()
13 $nextTick()
次の DOM 更新サイクルが終了した後にコールバックを実行します。		 this.$nextTick(() => { console.log('DOM updated') })
その他の拡張