Vue3 API des options

Les API suivantes sont largement utilisées dans l'API Options de Vue pour gérer l'état, le cycle de vie, les slots, l'injection de dépendances et d'autres fonctionnalités.

1. Options d'état

Non. API et description Exemple
1 data
L'option data d'un composant, utilisée pour définir l'état du composant.		 data() { return { count: 0 }; }
2 props
L'option props d'un composant, définissant les données transmises d'un composant parent à un composant enfant.		 props: { msg: String }
3 computed
Propriétés calculées, utilisées pour définir des valeurs dérivées à partir de l'état du composant (data, props).		 computed: { doubledCount() { return this.count * 2; } }
4 methods
L'option methods d'un composant, utilisée pour définir la logique métier du composant.		 methods: { increment() { this.count += 1; } }
5 watch
Écouter les changements dans les données réactives du composant et exécuter des callbacks.		 watch: { count(newVal) { console.log(newVal); } }
6 emits
Définir des événements personnalisés que le composant peut émettre.		 emits: ['update']
7 expose
Propriétés ou méthodes explicitement exposées pour permettre l'accès par le composant parent.		 expose() { return { method } }

2. Options de rendu

Non. API et description Exemple
1 template
Définir le template HTML du composant.		 <template><button @click="increment">{{ count }}</button></template>
2 render
Utiliser une fonction de rendu au lieu d'un template.		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
Configurer les options du compilateur de template.		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
Définir les slots du composant.		 <slot></slot>

3. Options du cycle de vie

Non. API et description Exemple
1 beforeCreate
Appelé avant que le composant ne soit instancié.		 beforeCreate() { console.log('Before Create') }
2 created
Appelé après la création de l'instance du composant, les données étant déjà initialisées.		 created() { console.log('Created') }
3 beforeMount
Appelé avant le montage dans le DOM, le template étant déjà compilé.		 beforeMount() { console.log('Before Mount') }
4 mounted
Appelé après que le composant a été monté dans le DOM.		 mounted() { console.log('Mounted') }
5 beforeUpdate
Appelé après la modification des données et avant que le composant ne soit re-rendu.		 beforeUpdate() { console.log('Before Update') }
6 updated
Appelé après que la mise à jour du composant est terminée.		 updated() { console.log('Updated') }
7 beforeUnmount
Appelé avant que le composant ne soit démonté.		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
Appelé après que le composant a été démonté.		 unmounted() { console.log('Unmounted') }
9 errorCaptured
Appelé lorsque des erreurs provenant de composants enfants sont capturées.		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
Appelé lorsque les données réactives changent et déclenchent un nouveau rendu.		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
Appelé lorsque les données réactives déclenchent un nouveau rendu.		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
Appelé lorsque le composant est activé (uniquement pourkeep-alivecomposants).		 activated() { console.log('Activated') }
13 deactivated
Appelé lorsque le composant est désactivé (uniquement pourkeep-alivecomposants).		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
Un hook pour récupérer des données lors du rendu côté serveur.		 serverPrefetch() { return fetchData() }

4. Options de composition

Non. API et description Exemple
1 provide
Fournir des dépendances aux composants descendants.		 provide('key', 'value')
2 inject
Injecter des dépendances depuis les composants ancêtres.		 inject('key')
3 mixins
Introduire des mixins externes pour réutiliser la logique.		 mixins: [myMixin]
4 extends
Le composant étend les options d'un autre composant.		 extends: MyComponent

5. Autres divers

Non. API et description Exemple
1 name
Le nom du composant, généralement utilisé pour le débogage.		 name: 'MyComponent'
2 inheritAttrs
Contrôle si les attributs (attrs) du composant parent sont automatiquement hérités par l'élément racine.		 inheritAttrs: false
3 components
Enregistre des composants locaux afin qu'ils puissent être utilisés dans le composant actuel.		 components: { LocalComponent }
4 directives
Enregistre des directives locales afin qu'elles puissent être utilisées dans le composant actuel.		 directives: { focus: FocusDirective }

6. Instance de composant

Non. API et description Exemple
1 $data
Récupère l'objet data du composant.		 this.$data.count
2 $props
Récupère l'objet props du composant.		 this.$props.msg
3 $el
Récupère l'élément DOM sur lequel le composant est monté.		 this.$el
4 $options
Récupère les options de configuration du composant.		 this.$options.name
5 $parent
Récupère l'instance du composant parent.		 this.$parent
6 $root
Récupère l'instance du composant racine.		 this.$root
7 $slots
Récupère le contenu du slot du composant.		 this.$slots.default
8 $refs
Récupère l'objet de référence du composant.		 this.$refs.input
9 $attrs
Obtenir tous les attributs non liés aux props du composant.		 this.$attrs
10 $watch()
Surveiller les données réactives ou les propriétés calculées de l'instance du composant.		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
Émettre un événement personnalisé.		 this.$emit('update', newVal)
12 $forceUpdate()
Forcer Vue à effectuer un nouveau rendu du composant.		 this.$forceUpdate()
13 $nextTick()
Exécuter un callback après la fin du prochain cycle de mise à jour du DOM.		 this.$nextTick(() => { console.log('DOM updated') })
Autres extensions