Vue3 Options API

Die folgenden APIs werden in der Options-API von Vue häufig verwendet, um Zustand, Lebenszyklus, Slots, Abhängigkeitsinjektion und andere Funktionen zu verwalten.

1. Zustandsoptionen

Nein. API & Beschreibung Beispiel
1 data
Die data-Option einer Komponente, die verwendet wird, um den Zustand der Komponente zu definieren.		 data() { return { count: 0 }; }
2 props
Die props-Option einer Komponente, die die Daten definiert, die von einer übergeordneten an eine untergeordnete Komponente übergeben werden.		 props: { msg: String }
3 computed
Berechnete Eigenschaften, die verwendet werden, um abgeleitete Werte basierend auf dem Komponentenzustand (data, props) zu definieren.		 computed: { doubledCount() { return this.count * 2; } }
4 methods
Die methods-Option einer Komponente, die verwendet wird, um die Geschäftslogik der Komponente zu definieren.		 methods: { increment() { this.count += 1; } }
5 watch
Auf Änderungen der reaktiven Daten der Komponente hören und Callbacks ausführen.		 watch: { count(newVal) { console.log(newVal); } }
6 emits
Benutzerdefinierte Ereignisse definieren, die die Komponente auslösen kann.		 emits: ['update']
7 expose
Eigenschaften oder Methoden, die explizit für den Zugriff durch die übergeordnete Komponente verfügbar gemacht werden.		 expose() { return { method } }

2. Render-Optionen

Nein. API & Beschreibung Beispiel
1 template
Das HTML-Template der Komponente definieren.		 <template><button @click="increment">{{ count }}</button></template>
2 render
Eine Render-Funktion anstelle eines Templates verwenden.		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
Konfigurieren Sie die Optionen für den Template-Compiler.		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
Definieren Sie die Slots der Komponente.		 <slot></slot>

3. Lifecycle-Optionen

Nein. API & Beschreibung Beispiel
1 beforeCreate
Wird aufgerufen, bevor die Komponente instanziiert wird.		 beforeCreate() { console.log('Before Create') }
2 created
Wird aufgerufen, nachdem die Komponenteninstanz erstellt wurde und die Daten bereits eingerichtet sind.		 created() { console.log('Created') }
3 beforeMount
Wird aufgerufen, bevor die Komponente in das DOM gemountet wird, wobei das Template bereits kompiliert ist.		 beforeMount() { console.log('Before Mount') }
4 mounted
Wird aufgerufen, nachdem die Komponente in das DOM gemountet wurde.		 mounted() { console.log('Mounted') }
5 beforeUpdate
Wird aufgerufen, nachdem sich die Daten geändert haben und bevor die Komponente erneut gerendert wird.		 beforeUpdate() { console.log('Before Update') }
6 updated
Wird aufgerufen, nachdem das Update der Komponente abgeschlossen ist.		 updated() { console.log('Updated') }
7 beforeUnmount
Wird aufgerufen, bevor die Komponente ungemountet wird.		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
Wird aufgerufen, nachdem die Komponente ungemountet wurde.		 unmounted() { console.log('Unmounted') }
9 errorCaptured
Wird aufgerufen, wenn Fehler von untergeordneten Komponenten abgefangen werden.		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
Wird aufgerufen, wenn sich reaktive Daten ändern und ein erneutes Rendern auslösen.		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
Wird aufgerufen, wenn reaktive Daten ein erneutes Rendern auslösen.		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
Wird aufgerufen, wenn die Komponente aktiviert wird (nur fürkeep-aliveKomponenten).		 activated() { console.log('Activated') }
13 deactivated
Wird aufgerufen, wenn die Komponente deaktiviert wird (nur fürkeep-aliveKomponenten).		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
Ein Hook zum Abrufen von Daten beim serverseitigen Rendering.		 serverPrefetch() { return fetchData() }

4. Composition-Optionen

Nein. API & Beschreibung Beispiel
1 provide
Abhängigkeiten für untergeordnete Komponenten bereitstellen.		 provide('key', 'value')
2 inject
Abhängigkeiten von Vorfahrenkomponenten injizieren.		 inject('key')
3 mixins
Externe Mixins einführen, um Logik wiederzuverwenden.		 mixins: [myMixin]
4 extends
Die Komponente erweitert die Optionen einer anderen Komponente.		 extends: MyComponent

5. Sonstiges

Nein. API & Beschreibung Beispiel
1 name
Der Name der Komponente, der üblicherweise zum Debuggen verwendet wird.		 name: 'MyComponent'
2 inheritAttrs
Steuert, ob Attribute (attrs) von der übergeordneten Komponente automatisch vom Stammelement geerbt werden.		 inheritAttrs: false
3 components
Registriert lokale Komponenten, damit sie in der aktuellen Komponente verwendet werden können.		 components: { LocalComponent }
4 directives
Registriert lokale Direktiven, damit sie in der aktuellen Komponente verwendet werden können.		 directives: { focus: FocusDirective }

6. Komponenteninstanz

Nein. API & Beschreibung Beispiel
1 $data
Ruft das Datenobjekt der Komponente ab.		 this.$data.count
2 $props
Ruft das Props-Objekt der Komponente ab.		 this.$props.msg
3 $el
Ruft das DOM-Element ab, an das die Komponente gemountet ist.		 this.$el
4 $options
Ruft die Konfigurationsoptionen der Komponente ab.		 this.$options.name
5 $parent
Ruft die Instanz der übergeordneten Komponente ab.		 this.$parent
6 $root
Ruft die Instanz der Root-Komponente ab.		 this.$root
7 $slots
Ruft den Slot-Inhalt der Komponente ab.		 this.$slots.default
8 $refs
Ruft das Referenzobjekt der Komponente ab.		 this.$refs.input
9 $attrs
Alle Attribute abrufen, die nicht an die Props der Komponente gebunden sind.		 this.$attrs
10 $watch()
Die reaktiven Daten oder berechneten Eigenschaften der Komponenteninstanz überwachen.		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
Ein benutzerdefiniertes Ereignis auslösen.		 this.$emit('update', newVal)
12 $forceUpdate()
Vue zum erneuten Rendern der Komponente zwingen.		 this.$forceUpdate()
13 $nextTick()
Einen Callback ausführen, nachdem der nächste DOM-Update-Zyklus beendet ist.		 this.$nextTick(() => { console.log('DOM updated') })
Andere Erweiterungen