La documentation Vue.js décrit les événements created
et mounted
comme suit:
created
Appelé de manière synchrone après la création de l'instance. À ce stade, l'instance a fini de traiter les options, ce qui signifie que les éléments suivants ont été configurés: observation des données, propriétés calculées, méthodes, rappels de surveillance / événement. Cependant, la phase de montage n'a pas été lancée et la propriété $ el ne sera pas encore disponible.
mounted
Appelé après que l'instance vient d'être montée où el est remplacé par le vm. $ El nouvellement créé. Si l'instance racine est montée sur un élément dans le document, vm. $ El sera également dans le document lorsque monté est appelé.
Ce hook n'est pas appelé lors du rendu côté serveur.
Je comprends la théorie, mais j'ai 2 questions concernant la pratique:
- Y a-t-il un cas où
created
serait utilisé plusmounted
? - À quoi puis-je utiliser l'
created
événement en situation réelle (code réel)?
la source
created
est appelée plus tôt, il est donc logique de déclencher la récupération de données depuis le backend de l'API par exemple.created()
pour distribuer des actions pour les appels API.Réponses:
created()
: le traitement des options étant terminé, vous avez accès au réactifdata
propriétés et modifiez-les si vous le souhaitez. À ce stade, DOM n'a pas encore été monté ou ajouté. Vous ne pouvez donc pas faire de manipulation DOM icimounted()
: appelée après le montage ou le rendu du DOM. Ici, vous avez accès aux éléments DOM et la manipulation DOM peut être effectuée par exemple obtenir le innerHTML:Donc vos questions:
Is there any case where created would be used over mounted?
Créé est généralement utilisé pour récupérer les données de l'API backend et les définir sur les propriétés des données. Mais dans le
mounted()
hook SSR n'est pas présent, vous devez effectuer des tâches telles que la récupération de données dans le hook créé uniquementWhat can I use the created event for, in real-life (real-code) situation?
Pour récupérer toutes les données requises initiales à rendre (comme JSON) à partir d'une API externe et les affecter à toutes les propriétés de données réactives
la source