Quelle est la différence entre l'instruction vue et $nextTick pour faire fonctionner le DOM ?

Cet article vous présente l'article sur quelle est la différence entre l'instruction vue et $nextTick pour faire fonctionner le DOM Il a une bonne valeur de référence et j'espère que c'est possible ? aidez si vous en avez besoin, mes amis.

File d'attente de mise à jour asynchrone

Peut-être que vous ne l'avez pas encore remarqué, Vue effectue les mises à jour du DOM de manière asynchrone. Dès que des modifications de données sont observées, Vue ouvrira une file d'attente et mettra en mémoire tampon toutes les modifications de données qui se produisent dans la même boucle d'événements. Si le même observateur est déclenché plusieurs fois, il ne sera placé dans la file d'attente qu'une seule fois. Cette déduplication lors de la mise en mémoire tampon est importante pour éviter les calculs et opérations DOM inutiles. Ensuite, lors de la prochaine boucle d'événement "tick", Vue vide la file d'attente et effectue le travail réel (dédupliqué). Vue essaie en interne d'utiliser Promise.then et MessageChannel natifs pour les files d'attente asynchrones. Si l'environnement d'exécution ne le prend pas en charge, setTimeout(fn, 0) sera utilisé à la place.

Par exemple, lorsque vous définissez vm.someData = 'new value' , le composant ne sera pas restitué immédiatement. Lorsque la file d'attente est vidée, le composant est mis à jour au prochain "tic" lorsque la file d'attente de la boucle d'événements est effacée. La plupart du temps, nous n'avons pas à nous soucier de ce processus, mais si vous souhaitez faire quelque chose après la mise à jour de l'état du DOM, cela peut être un peu délicat. Bien que Vue.js encourage généralement les développeurs à penser de manière « basée sur les données » et à éviter de toucher directement au DOM, il y a des moments où nous devons vraiment le faire. Pour attendre que Vue ait fini de mettre à jour le DOM après les modifications des données, vous pouvez utiliser Vue.nextTick(callback) immédiatement après les modifications des données. Cette fonction de rappel sera appelée une fois la mise à jour du DOM terminée. Par exemple :

<p id="example">{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

L'utilisation de la méthode d'instance vm.$nextTick() au sein d'un composant est particulièrement pratique car elle ne nécessite pas de Vue globale, et celle-ci dans la fonction de rappel sera automatiquement liée à la Vue actuelle. exemple :

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

directive vue

Fonction Hook

Un objet de définition de directive peut être fourni comme suit Plusieurs fonctions hook (toutes facultatives) :

bind : appelée une seule fois, lorsque l'instruction est liée à l'élément pour la première fois. Les paramètres d'initialisation uniques peuvent être effectués ici.

inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).

update : Appelé lorsque le VNode du composant est mis à jour, mais peut se produire avant que son VNode enfant ne soit mis à jour. La valeur de la directive peut avoir changé ou non. Mais vous pouvez ignorer les mises à jour inutiles du modèle en comparant les valeurs avant et après la mise à jour (voir ci-dessous pour les paramètres détaillés de la fonction hook).

componentUpdated : Appelé après que tous les VNode du composant où se trouve l'instruction et ses sous-VNodes aient été mis à jour.

unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Paramètres de la fonction Hook (c'est-à-dire el, liaison, vnode et oldVnode).

Il est à noter que le document n'a peut-être pas été inséré dans le DOM lors de la mise à jour, mais composantUpdated signifie que le document a été inséré dans le DOM. Par ailleurs, les conditions de déclenchement de la fonction hook dite de « mise à jour » sont très larges et difficiles à contrôler. Par exemple, les mises à jour d'autres nœuds adjacents qui ne sont pas liés au nœud provoqueront la redistribution de sa disposition, ce qui provoquera également le déclenchement de la fonction hook

Par conséquent, si vous souhaitez faire fonctionner le DOM après les données est mis à jour, utilisez la commande update , composantUpdated doit être prudent, vous pouvez envisager d'utiliser nextTick

Articles connexes recommandés :

Résumé de la méthode d'empaquetage du projet Vue par environnement

Principe de mise en œuvre du modèle V Qu'est-ce que c'est ? Introduction à l'utilisation du v-model (avec code)

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!