Vue3 グローバル API

Vue3 グローバル API は次のとおりです：

番号 API & 説明 例
1 createApp()
Vue アプリケーションインスタンスを作成する。通常はクライアントサイドレンダリングに使用されます。		 const app = createApp(App)
2 createSSRApp()
サーバーサイドレンダリング（SSR）用の Vue アプリケーションインスタンスを作成する。		 const app = createSSRApp(App)
3 app.mount()
Vue アプリケーションインスタンスを指定された DOM 要素にマウントする。		 app.mount('#app')
4 app.unmount()
Vue アプリケーションインスタンスをアンマウントする。		 app.unmount()
5 app.onUnmount()
アンマウント時のコールバック関数を登録する。		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
グローバルコンポーネントを登録し、コンポーネントをどこでも使用できるようにする。		 app.component('MyComponent', MyComponent)
7 app.directive()
グローバルディレクティブを登録し、カスタムディレクティブを作成できるようにする。		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
プラグインをインストールする。プラグインはアプリケーションに追加機能を提供できます。		 app.use(SomePlugin)
9 app.mixin()
グローバルミックスインを登録し、すべてのコンポーネントに共有データまたはメソッドを提供する。		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
アプリケーション全体に依存関係を提供し、コンポーネント間でデータを共有する。		 app.provide('key', 'some value')
11 app.runWithContext()
Vue アプリケーションのコンテキストで関数を実行し、コンテキストデータにアクセスできるようにする。		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Vue の現在のバージョン番号を取得する。		 console.log(app.version)
13 app.config
アプリケーションインスタンスのグローバル設定を取得および設定する。		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
グローバルエラーハンドラー関数を設定し、アプリケーションでキャッチされないエラーが発生したときにトリガーする。		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
グローバル警告ハンドラー関数を設定し、アプリケーション内の警告情報を処理する。		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
パフォーマンス監視を有効にし、レンダリングパフォーマンスデータを提供する。		 app.config.performance = true
17 app.config.compilerOptions
テンプレートコンパイラのオプションを設定し、テンプレートのコンパイル動作を制御する。		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
グローバルプロパティを設定し、アプリケーション内のすべてのコンポーネントからアクセスできるようにする。		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
コンポーネントオプションのマージ戦略を定義し、コンポーネントのオプションをマージする方法を制御する。		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Vue インスタンス ID のプレフィックスを設定する。デフォルトは "vue-" です。		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
本番環境で未処理のエラーをスローするかどうかを制御する。		 app.config.throwUnhandledErrorInProduction = false
22 version
Vue の現在のバージョン番号を取得する。		 console.log(Vue.version)
23 nextTick()
DOM の更新完了後に遅延コールバックを実行し、非同期 DOM 更新を処理するために使用されます。		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
コンポーネントを定義するために使用され、型推論とより簡潔な構文を提供します。		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
非同期コンポーネントを定義する。コンポーネントは必要に応じて遅延読み込みされます。		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

アプリケーションインスタンス API

1. createApp()

  • 機能: Vue アプリケーションインスタンスを作成する。

  • 使用法: createApp(rootComponent, rootProps)

  • パラメータ:

    • rootComponent: ルートコンポーネント。

    • rootProps(オプション): ルートコンポーネントに渡す props。

例

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

2. createSSRApp()

  • 機能: サーバーサイドレンダリング (SSR) をサポートする Vue アプリケーションインスタンスを作成する。

  • 使用法: createSSRApp(rootComponent, rootProps)

  • パラメータ:

    • rootComponent: ルートコンポーネント。

    • rootProps(オプション): ルートコンポーネントに渡す props。

例

import { createSSRApp } from 'vue';
import App from './App.vue';

const app = createSSRApp(App);

3. app.mount()

  • 機能: アプリケーションを DOM 要素にマウントする。

  • 使用法: app.mount(container)

  • パラメータ:

    • container: DOM 要素またはセレクター文字列。

例

app.mount('#app');

4. app.unmount()

  • 機能: アプリケーションインスタンスをアンマウントする。

  • 使用法: app.unmount()

例

app.unmount();

5. app.onUnmount()

  • 機能: アプリケーションのアンマウント時に呼び出されるコールバック関数を登録する。

  • 使用法: app.onUnmount(callback)

  • パラメータ:

    • callback: アンマウント時に呼び出される関数。

例

app.onUnmount(() => {
  console.log('App unmounted');
});

6. app.component()

  • 機能: グローバルコンポーネントを登録または取得する。

  • 使用法:

    • 登録:app.component(name, component)

    • 取得:app.component(name)

  • パラメータ:

    • name: コンポーネント名。

    • component: コンポーネント定義。

例

app.component('MyComponent', {
  template: '<div>My Component</div>'
});

7. app.directive()

  • 機能: グローバルディレクティブを登録または取得する。

  • 使用法:

    • 登録:app.directive(name, directive)

    • 取得:app.directive(name)

  • パラメータ:

    • name: ディレクティブ名。

    • directive: ディレクティブ定義。

例

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

8. app.use()

  • 機能: プラグインをインストールする。

  • 使用法: app.use(plugin, options)

  • パラメータ:

    • plugin: プラグイン。

    • options(オプション): プラグインオプション。

例

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

9. app.mixin()

  • 機能: グローバルミックスインオプション。

  • 使用法: app.mixin(mixin)

  • パラメータ:

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

例

app.mixin({
  created() {
    console.log('Global mixin created');
  }
});

10. app.provide()

  • 機能: グローバル依存関係を提供する。

  • 使用法: app.provide(key, value)

  • パラメータ:

    • key: 依存関係の名前。

    • value: 依存関係の値。

例

app.provide('theme', 'dark');

11. app.runWithContext()

  • 機能: 現在のアプリケーションのコンテキストで関数を実行する。

  • 使用法: app.runWithContext(fn)

  • パラメータ:

    • fn: 実行する関数。

例

app.runWithContext(() => {
  console.log('Running with app context');
});

12. app.version

  • 機能: Vue のバージョンを取得する。

  • 使用法: app.version

例

console.log(app.version);

13. app.config

  • 機能: アプリケーション設定オブジェクト。

  • 使用法: app.config

例

app.config.errorHandler = (err) => {
  console.error(err);
};

14. app.config.errorHandler

  • 機能: グローバルエラーハンドラー関数。

  • 使用法: app.config.errorHandler = (err, vm, info) => {}

  • パラメータ:

    • err: エラーオブジェクト。

    • vm: エラーが発生したコンポーネントインスタンス。

    • info: エラーメッセージ。

例

app.config.errorHandler = (err) => {
  console.error('Global error:', err);
};

15. app.config.warnHandler

  • 機能: グローバル警告ハンドラー関数。

  • 使用法: app.config.warnHandler = (msg, vm, trace) => {}

  • パラメータ:

    • msg: 警告情報。

    • vm: 警告が発生したコンポーネントインスタンス。

    • trace: 警告スタック。

例

app.config.warnHandler = (msg) => {
  console.warn('Global warning:', msg);
};

16. app.config.performance

  • 機能: パフォーマンストラッキングを有効にする。

  • 使用法: app.config.performance = true

例

app.config.performance = true;

17. app.config.compilerOptions

  • 機能: テンプレートコンパイラのオプションを設定する。

  • 使用法: app.config.compilerOptions = { /* options */ }

例

app.config.compilerOptions = { whitespace: 'preserve' };

18. app.config.globalProperties

  • 機能: グローバルプロパティを追加する。

  • 使用法: app.config.globalProperties[key] = value

例

app.config.globalProperties.$myGlobal = 'Hello';

19. app.config.optionMergeStrategies

  • 機能: カスタムオプションのマージ戦略。

  • 使用法: app.config.optionMergeStrategies[key] = strategy

例

app.config.optionMergeStrategies.customOption = (parent, child) => {
  return child || parent;
};

20. app.config.idPrefix

  • 機能: コンポーネント ID のプレフィックスを設定する。

  • 使用法: app.config.idPrefix = 'my-app-'

例

app.config.idPrefix = 'my-app-';

21. app.config.throwUnhandledErrorInProduction

  • 機能: 本番環境で未処理のエラーをスローする。

  • 使用法: app.config.throwUnhandledErrorInProduction = true

例

app.config.throwUnhandledErrorInProduction = true;

汎用 API

1. version

  • 機能: Vue のバージョンを取得する。

  • 使用法: Vue.version

例

console.log(Vue.version);

2. nextTick()

  • 機能: 次の DOM 更新サイクルが終了した後にコールバックを実行する。

  • 使用法: nextTick(callback)

  • パラメータ:

    • callback: コールバック関数。

例

import { nextTick } from 'vue';
nextTick(() => {
  console.log('DOM updated');
});

3. defineComponent()

  • 機能: コンポーネントを定義する。

  • 使用法: defineComponent(options)

  • パラメータ:

    • options: コンポーネントオプション。

例

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  template: '<div>My Component</div>'
});

4. defineAsyncComponent()

  • 機能: 非同期コンポーネントを定義する。

  • 使用法: defineAsyncComponent(loader)

  • パラメータ:

    • loader: 非同期ロード関数。

例

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);
その他の拡張