Analyse sur next et Tick (nextTick) en vue

Cet article présente principalement l'analyse de next et Tick (nextTick) en vue. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Avant-propos

<.>Je n'ai jamais vu le code source de vue auparavant, mais après avoir lu le code source, j'ai quelques questions. Si je ne vois pas le code source, je n'ai vraiment aucun doute sur l'utilisation de nextTick, car je sais seulement. que je veux obtenir la version mise à jour. J'ai écrit le rappel dans le DOM, en m'assurant qu'il était exact. Un jour, j'étais curieux et j'ai débogué le code et j'ai trouvé quelques questions....

Recommandé. manuel :Tutoriel de base de Vue .js

Quand ce Tick commencera-t-il ?

Les boucles d'événements de recherche Baidu peuvent voir de nombreux articles, mais après en avoir lu beaucoup articles, je ne savais pas ou L'auteur n'a pas expliqué quand le premier tick a commencé, mais heureusement, quelqu'un de skycity l'a dit clairement. Je me souviens que j'avais eu la réponse dans les commentaires d'un article précédent de Nuggets. le script global commence à s'exécuter. Une série de ticks

Quand ce Tick se terminera-t-il ?

C'est également ce à quoi je suis arrivé à la conclusion sur la base des données de recherche. Ce cycle de Tick se termine lorsque l'interface graphique. est rendu, mais avant le début du rendu, le moteur js une fois toutes les files d'attente de micro-tâches exécutées, le nouveau nom est jobs et les macro-tâches sont appelées tâches

Que faites-vous après la fin d'une tick ?

Continuez à vérifier s'il y a des tâches dans la file d'attente des tâches d'événement. Sinon, attendez tranquillement qu'elle ne soit pas vide. S'il y en a, continuez à lancer le deuxième tour de ticks, supprimez les tâches et. exécutez-les

J'ai dessiné une image pour représenter cela

Cette conclusion est ce que je pense être correcte pour le moment. J'espère que vous pourrez commenter et discuter s'il y en a. il y a quelque chose qui ne va pas.

Que signifie ensuite ?

Selon l'explication sur le site officiel

Exécutez le rappel différé après la fin du prochain cycle de mise à jour du DOM. Utilisez cette méthode immédiatement après avoir modifié les données pour obtenir le DOM mis à jour.

Personnellement, je ne comprends pas à quoi fait référence le prochain cycle de mise à jour dom ? Quand commence ce cycle de mise à jour du DOM ? Quand se termine-t-il ? J'espère que quelqu'un sait et peut expliquer. Je pense que le moment de l'exécution du rappel est avant le prochain tick. Vous pouvez voir le code ci-dessous

Supposons qu'il y ait cette ligne de code dans le HTML
<p ref="msg">{{msg}}</p> Nous exécutons ce qui précède en monté

this.msg = 'hello';
this.$nextTick(()=>{
    console.log(this.$refs.msg.innerHTML)
})

Le flux d'exécution approximatif du code dans vue est le suivant

Grâce à l'analyse du processus ci-dessus, le rappel dans nextTick est exécuté dans la boucle temporelle actuelle et n'est pas exécuté dans la prochaine boucle d'événements. Ainsi, le dom est bien à jour lorsque la prochaine boucle d'événement est exécutée, mais le rappel n'est pas exécuté dans la prochaine boucle d'événement.

Articles connexes recommandés : 1.
Introduction détaillée à la méthode nextTick dans Vue 2.
Implémentez une file d'attente de mise à jour asynchrone via nextTick() dans Vuejs Recommandations vidéo associées :
​ 1.
Série Jade Girl Heart Sutra

Résumé

1 Le rappel dans nextTick est exécuté dans cette boucle de tick

2. les microtâches seront exécutées au cours de cette série de ticks
3. Toute tâche macro, c'est-à-dire les tâches, n'est pas exécutée en un seul tick, mais en différents ticks

Ce qui précède est l'intégralité du contenu de cet article. J'espère être utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser Vue+Mock.js pour créer un environnement de développement indépendant front-end

Explication détaillée de Transition des composants intégrés de Vue (images et texte)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!