Vue3 Global API

Vue3 Global API ist wie folgt:

Nein. API & Beschreibung Beispiel
1 createApp()
Erstellt eine Vue-Anwendungsinstanz, die normalerweise für das clientseitige Rendering verwendet wird.		 const app = createApp(App)
2 createSSRApp()
Erstellt eine Vue-Anwendungsinstanz für serverseitiges Rendering (SSR).		 const app = createSSRApp(App)
3 app.mount()
Montiert die Vue-Anwendungsinstanz an das angegebene DOM-Element.		 app.mount('#app')
4 app.unmount()
Hebt die Montage der Vue-Anwendungsinstanz auf.		 app.unmount()
5 app.onUnmount()
Registriert eine Callback-Funktion für den Fall, dass die Anwendung demontiert wird.		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
Registriert eine globale Komponente, wodurch die Komponente überall verwendet werden kann.		 app.component('MyComponent', MyComponent)
7 app.directive()
Registriert eine globale Direktive, was die Erstellung benutzerdefinierter Direktiven ermöglicht.		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
Installiert ein Plugin, das zusätzliche Funktionalität für die Anwendung bereitstellen kann.		 app.use(SomePlugin)
9 app.mixin()
Registriert ein globales Mixin, das allen Komponenten gemeinsame Daten oder Methoden bereitstellt.		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
Stellt der gesamten Anwendung Abhängigkeiten bereit, wodurch Daten zwischen Komponenten geteilt werden.		 app.provide('key', 'some value')
11 app.runWithContext()
Führt eine Funktion im Vue-Anwendungskontext aus, wodurch Zugriff auf Kontextdaten möglich ist.		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Ruft die aktuelle Versionsnummer von Vue ab.		 console.log(app.version)
13 app.config
Ruft die globale Konfiguration der Anwendungsinstanz ab und legt sie fest.		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
Legt eine globale Fehlerbehandlungsfunktion fest, die ausgelöst wird, wenn in der Anwendung ein nicht abgefangener Fehler auftritt.		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
Legt eine globale Warnungsbehandlungsfunktion fest, um Warnmeldungen in der Anwendung zu behandeln.		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
Aktiviert die Leistungsüberwachung, um Rendering-Leistungsdaten bereitzustellen.		 app.config.performance = true
17 app.config.compilerOptions
Konfiguriert Optionen für den Template-Compiler und steuert damit das Verhalten der Template-Kompilierung.		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
Legt globale Eigenschaften fest, auf die alle Komponenten in der Anwendung zugreifen können.		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
Definiert Strategien zum Zusammenführen von Komponentenoptionen und steuert, wie Komponentenoptionen zusammengeführt werden.		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Legt das Präfix für Vue-Instanz-IDs fest, standardmäßig "vue-".		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
Steuert, ob unbehandelte Fehler in der Produktionsumgebung geworfen werden.		 app.config.throwUnhandledErrorInProduction = false
22 version
Ruft die aktuelle Versionsnummer von Vue ab.		 console.log(Vue.version)
23 nextTick()
Führt einen verzögerten Callback nach Abschluss der DOM-Aktualisierung aus, der verwendet wird, um asynchrone DOM-Aktualisierungen zu verarbeiten.		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
Wird verwendet, um Komponenten zu definieren, und bietet Typinferenz und eine einfachere Syntax.		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
Definiert asynchrone Komponenten, die bei Bedarf lazy geladen werden.		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

API der Anwendungsinstanz

1. createApp()

  • Beschreibung: Erstellt eine Vue-Anwendungsinstanz.

  • Nutzung: createApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Root-Komponente.

    • rootProps(Optional): Props, die an die Root-Komponente übergeben werden.

Beispiel

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

const app = createApp(App);

2. createSSRApp()

  • Beschreibung: Erstellt eine Vue-Anwendungsinstanz, die Server-Side Rendering (SSR) unterstützt.

  • Nutzung: createSSRApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Root-Komponente.

    • rootProps(Optional): Props, die an die Root-Komponente übergeben werden.

Beispiel

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

const app = createSSRApp(App);

3. app.mount()

  • Beschreibung: Montiert die Anwendung an ein DOM-Element.

  • Nutzung: app.mount(container)

  • Parameters:

    • container: DOM-Element oder Selektor-String.

Beispiel

app.mount('#app');

4. app.unmount()

  • Beschreibung: Demontiert die Anwendungsinstanz.

  • Nutzung: app.unmount()

Beispiel

app.unmount();

5. app.onUnmount()

  • Beschreibung: Registriert eine Callback-Funktion, die aufgerufen wird, wenn die Anwendung demontiert wird.

  • Nutzung: app.onUnmount(callback)

  • Parameters:

    • callback: Die Funktion, die beim Demontieren aufgerufen wird.

Beispiel

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

6. app.component()

  • Beschreibung: Globale Komponente registrieren oder abrufen.

  • Nutzung:

    • Registrierenapp.component(name, component)

    • Abrufen:app.component(name)

  • Parameters:

    • name: Komponentenname.

    • component: Komponentendefinition.

Beispiel

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

7. app.directive()

  • Beschreibung: Registrieren oder Abrufen einer globalen.

  • Nutzung:

    • Registrierenapp.directive(name, directive)

    • Abrufen:app.directive(name)

  • Parameters:

    • name: Direktivenname.

    • directive: Direktivendefinition.

Beispiel

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

8. app.use()

  • Beschreibung: Ein Plugin installieren.

  • Nutzung: app.use(plugin, options)

  • Parameters:

    • plugin: Plugin.

    • options(Optional): Plugin-Optionen.

Beispiel

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

9. app.mixin()

  • Beschreibung: Globale Mixin-Optionen.

  • Nutzung: app.mixin(mixin)

  • Parameters:

    • mixin: Mixin-Objekt.

Beispiel

app.mixin({
  created() {
    console.log('Globales Mixin erstellt');
  }
});

10. app.provide()

  • Beschreibung: Globale Abhängigkeiten bereitstellen.

  • Nutzung: app.provide(key, value)

  • Parameters:

    • key: Name der Abhängigkeit.

    • value: Wert der Abhängigkeit.

Beispiel

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

11. app.runWithContext()

  • Beschreibung: Eine Funktion im aktuellen Anwendungskontext ausführen.

  • Nutzung: app.runWithContext(fn)

  • Parameters:

    • fn: Die auszuführende Funktion.

Beispiel

app.runWithContext(() => {
  console.log('Läuft mit App-Kontext');
});

12. app.version

  • Beschreibung: Vue-Version abrufen.

  • Nutzung: app.version

Beispiel

console.log(app.version);

13. app.config

  • Beschreibung: Konfigurationsobjekt der Anwendung.

  • Nutzung: app.config

Beispiel

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

14. app.config.errorHandler

  • Beschreibung: Globale Fehlerbehandlungsfunktion.

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

  • Parameters:

    • err: Fehlerobjekt.

    • vm: Die Komponenteninstanz, in der der Fehler aufgetreten ist.

    • info: Fehlermeldung.

Beispiel

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

15. app.config.warnHandler

  • Beschreibung: Globale Warnungs-Handler-Funktion.

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

  • Parameters:

    • msg: Warnmeldung.

    • vm: Die Komponenteninstanz, in der die Warnung aufgetreten ist.

    • trace: Warnungs-Stack.

Beispiel

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

16. app.config.performance

  • Beschreibung: Leistungsverfolgung aktivieren.

  • Nutzung: app.config.performance = true

Beispiel

app.config.performance = true;

17. app.config.compilerOptions

  • Beschreibung: Optionen für den Template-Compiler konfigurieren.

  • Nutzung: app.config.compilerOptions = { /* options */ }

Beispiel

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

18. app.config.globalProperties

  • Beschreibung: Globale Eigenschaften hinzufügen.

  • Nutzung: app.config.globalProperties[key] = value

Beispiel

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

19. app.config.optionMergeStrategies

  • Beschreibung: Benutzerdefinierte Strategie zum Zusammenführen von Optionen.

  • Nutzung: app.config.optionMergeStrategies[key] = strategy

Beispiel

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

20. app.config.idPrefix

  • Beschreibung: Komponenten-ID-Präfix festlegen.

  • Nutzung: app.config.idPrefix = 'my-app-'

Beispiel

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

21. app.config.throwUnhandledErrorInProduction

  • Beschreibung: Unbehandelte Fehler in der Produktionsumgebung werfen.

  • Nutzung: app.config.throwUnhandledErrorInProduction = true

Beispiel

app.config.throwUnhandledErrorInProduction = true;

Allgemeine API

1. version

  • Beschreibung: Vue-Version abrufen.

  • Nutzung: Vue.version

Beispiel

console.log(Vue.version);

2. nextTick()

  • Beschreibung: Führt einen Callback aus, nachdem der nächste DOM-Update-Zyklus beendet ist.

  • Nutzung: nextTick(callback)

  • Parameters:

    • callback: Callback-Funktion.

Beispiel

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

3. defineComponent()

  • Beschreibung: Definiert eine Komponente.

  • Nutzung: defineComponent(options)

  • Parameters:

    • options: Komponentenoptionen.

Beispiel

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

4. defineAsyncComponent()

  • Beschreibung: Definiert eine asynchrone Komponente.

  • Nutzung: defineAsyncComponent(loader)

  • Parameters:

    • loader: Asynchrone Ladefunktion.

Beispiel

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);
Andere Erweiterungen