Quelle fonction nextTick a-t-il dans Vue ? Implémentation simple de nextTick

Cet article vous explique quelle est la fonction de nextTick dans Vue ? Comment y parvenir ? , a une certaine valeur de référence, les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

nextTick est une fonction essentielle de Vue, et nextTick est souvent utilisé dans l'implémentation interne de Vue. Cependant, de nombreux novices ne comprennent pas le principe de nextTick, ni même la fonction de nextTick.

Alors, jetons d’abord un coup d’œil à ce qu’est nextTick.

Fonction nextTick

Regardez la description de la documentation officielle :

Exécutez un 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.

Regardez à nouveau l'exemple officiel :

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Nouveau depuis la version 2.1.0 : Si aucun rappel n'est fourni et dans un environnement qui prend en charge Promise, une promesse est renvoyée. Veuillez noter que Vue n'est pas fourni avec les polyfills Promise, donc si votre navigateur cible ne prend pas en charge nativement Promise (IE : pourquoi me regardez-vous), vous devez fournir le polyfill vous-même.

Comme vous pouvez le constater, la fonction principale de nextTick est de modifier les données et de laisser la fonction de rappel agir sur la mise à jour du dom. Beaucoup de gens sont confus lorsqu'ils voient cela. Pourquoi dois-je exécuter la fonction de rappel après la mise à jour du DOM ? Après avoir modifié les données, le DOM ne se met-il pas à jour automatiquement ?

Ceci est lié à Event Loop dans JS. Il existe d'innombrables tutoriels en ligne, je n'entrerai donc pas dans les détails ici. Il est recommandé de comprendre la boucle d'événements avant de continuer à lire cet article.

Un exemple pratique :

Nous avons une table avec un téléavertisseur, et le premier élément doit être sélectionné à chaque fois que la page est tournée. Dans des circonstances normales, ce que nous voulons, c'est cliquer sur le tourne-page, obtenir des données en arrière-plan, mettre à jour les données du tableau et manipuler l'API du tableau pour sélectionner le premier élément.

Cependant, vous constaterez que les données du tableau sont mises à jour, mais que le premier élément n'est pas sélectionné. Car lorsque vous sélectionnez le premier élément, bien que les données soient mises à jour, le DOM n'est pas mis à jour. À ce stade, vous pouvez utiliser nextTick pour manipuler la sélection du premier élément du tableau après la mise à jour du DOM.

Alors, que fait exactement nextTick pour exécuter la fonction de rappel après la mise à jour du DOM ?

Analyse du code source

Le code source de nextTick se trouve dans src/core/util/next-tick.js, avec un total de 118 lignes. Il est très court et concis, et. est très adapté aux étudiants qui lisent le code source pour la première fois.

Le code source de nextTick est principalement divisé en deux parties :

1. Détection de capacité

2. Exécuter la file d'attente de rappel de différentes manières en fonction de la détection de capacité

<. 🎜>Détection de capacité

Cette partie est en fait très simple. Comme nous le savons tous, la boucle d'événement est divisée en macro-tâche et micro-tâche. Peu importe si une macro-tâche ou une micro-tâche est exécutée, elle entrera dans le tick suivant. une fois terminé, et dans les deux cas, effectuez le rendu de l'interface utilisateur entre les ticks.

Cependant, les macro-tâches prennent plus de temps que les micro-tâches, donc si le navigateur les prend en charge, utilisez d'abord les micro-tâches. Si le navigateur ne prend pas en charge les microtâches, utilisez les macrotâches ; cependant, l'efficacité des différentes macrotâches est également différente et vous devez utiliser différentes macrotâches en fonction de la prise en charge du navigateur.

nextTick suit cette idée en matière de tests d'aptitude.

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果浏览器不支持Promise，使用宏任务来执行nextTick回调函数队列
// 能力检测，测试浏览器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，宏任务（ macro task）使用setImmediate
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 同上
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  // 都不支持的情况下，使用setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

Tout d'abord, vérifiez si le navigateur prend en charge setImmediate. Sinon, utilisez MessageChannel. Sinon, vous ne pouvez utiliser que setTimeout, qui est le moins efficace mais le plus compatible.

Après cela, vérifiez si le navigateur prend en charge Promise. Si c'est le cas, utilisez Promise pour exécuter la file d'attente des fonctions de rappel. Après tout, les microtâches sont plus rapides que les macrotâches. Si cela n'est pas pris en charge, vous pouvez uniquement utiliser des tâches de macro pour exécuter la file d'attente des fonctions de rappel.

Exécuter la file d'attente des fonctions de rappel

Le code pour exécuter la file d'attente des fonctions de rappel se trouve au début et à la fin

// 回调函数队列
const callbacks = []
// 异步锁
let pending = false

// 执行回调函数
function flushCallbacks () {
  // 重置异步锁
  pending = false
  // 防止出现nextTick中包含nextTick时出现问题，在执行回调函数队列前，提前复制备份，清空回调函数队列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 执行回调函数队列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

...

// 我们调用的nextTick函数
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 将回调函数推入回调队列
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, &#39;nextTick&#39;)
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果异步锁未锁上，锁上异步锁，调用异步函数，准备等同步函数执行完后，就开始执行回调函数队列
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  // 2.1.0新增，如果没有提供回调，并且支持Promise，返回一个Promise
  if (!cb && typeof Promise !== &#39;undefined&#39;) {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

Le processus global consiste à recevoir le fonction de rappel et poussez la fonction de rappel dans le rappel dans la file d'attente des fonctions.

En même temps, lors de la réception de la première fonction de rappel, exécutez la méthode asynchrone correspondante dans le test de capacité (la file d'attente des fonctions de rappel est appelée dans la méthode asynchrone).

Comment s'assurer qu'une méthode asynchrone n'est exécutée que lorsque la première fonction de rappel est reçue ?

Le code source de nextTick utilise le concept de verrou asynchrone, c'est-à-dire que lors de la réception de la première fonction de rappel, le verrou est d'abord fermé et la méthode asynchrone est exécutée. A ce moment, le navigateur attend que le code synchrone soit exécuté avant d'exécuter le code asynchrone.

Une analogie : cela équivaut à un groupe de passagers se préparant à monter dans le bus. Lorsque le premier passager monte dans le bus, le bus commence à démarrer et est prêt à partir une fois que tous les passagers sont montés dans le bus. bus, vous pouvez officiellement commencer à conduire.

Bien sûr, il y a un point difficile à comprendre lors de l'exécution de la fonction flushCallbacks, à savoir : pourquoi avez-vous besoin de sauvegarder la file d'attente des fonctions de rappel ? La file d'attente des fonctions de rappel est-elle également exécutée ?

Parce qu'il y aura une situation : nextTick applique nextTick. Si flushCallbacks n'effectue pas de traitement spécial et exécute directement la fonction de rappel dans une boucle, la fonction de rappel dans nextTick entrera dans la file d'attente de rappel. Cela équivaut à ce que les passagers du prochain bus montent à bord du bus précédent.

Implémenter un simple nextTick

Cela dit, implémentons un simple nextTick :

let callbacks = []
let pending = false

function nextTick (cb) {
    callbacks.push(cb)

    if (!pending) {
        pending = true
        setTimeout(flushCallback, 0)
    }
}

function flushCallback () {
    pending = false
    let copies = callbacks.slice()
    callbacks.length = 0
    copies.forEach(copy => {
        copy()
    })
}

Comme vous pouvez le voir, dans la version simple de nextTick, recevez le fonction de rappel via nextTick et exécutez la fonction de rappel de manière asynchrone via setTimeout. De cette façon, la fonction de rappel peut être exécutée au tick suivant, c'est-à-dire que la fonction de rappel est exécutée après le nouveau rendu de l'interface utilisateur.

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!