Vue actualise-t-elle le dom en temps réel ?

vue ne rafraîchit pas le dom en temps réel. Les mises à jour des données dans Vue sont asynchrones, ce qui signifie que les éléments DOM modifiés ne peuvent pas être obtenus immédiatement après la modification des données. Vue s'exécute de manière asynchrone lors de la mise à jour du DOM. Tant qu'il détecte les modifications de donné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 poussé qu'une seule fois. dans la file d'attente, cette déduplication lors de la mise en mémoire tampon est très importante pour éviter les calculs et opérations DOM inutiles.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Les mises à jour des données dans Vue sont asynchrones, ce qui signifie que nous ne pouvons pas obtenir les éléments DOM modifiés immédiatement après avoir modifié les données.

Vue est exécuté de manière asynchrone lors de la mise à jour de DOMDOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的，然后，在下一个的事件循环tick中，Vue刷新队列并执行实际(已去重的)工作，Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn, 0) Tant qu'il détecte les changements de données, Vue ouvrira une file d'attente et mettra en mémoire tampon les données qui se produisent dans la même boucle d'événements. . Toutes les modifications de données, si le même watcher est déclenché plusieurs fois, ne seront placées dans la file d'attente qu'une seule fois. Cette suppression des données en double pendant la mise en mémoire tampon est utile pour éviter les calculs inutiles et le DOM<. l> est très importante, puis, dans la boucle d'événement suivante <code>cochez, Vue actualise la file d'attente et effectue le travail réel (dédupliqué), Vue code> essaie en interne d'utiliser <code>Promise.then natif, MutationObserver et setImmediate pour les files d'attente asynchrones. Si l'environnement d'exécution ne le prend pas en charge, alors <. code>setTimeout(fn, 0) sera utilisé à la place.

Le principe de la mise à jour asynchrone du DOM par Vue

1. Quand puis-je obtenir le véritable élément DOM ?

Dans le rappel nextTick de Vue.

2. Pourquoi Vue doit-il utiliser la méthode nextTick pour obtenir le dernier DOM ?

Lorsque vue appelle Watcher pour mettre à jour la vue, elle ne la met pas à jour directement, mais ajoute le Watcher qui doit être mis à jour à la file d'attente queueWatcher, puis transmet la méthode de mise à jour spécifique flushSchedulerQueue à nexTick pour l'appel.

// src > core > observer > watcher.js + scheduler.js// 当一个 Data 更新时，会依次执行以下代码
// 1. 触发 Data.set
// 2. 调用 dep.notify
// 3. Dep 会遍历所有相关的 Watcher 执行 update 方法
class Watcher {
  // 4. 执行更新操作
  update() {
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
  // 5. 将当前 Watcher 添加到异步队列
  queue.push(watcher);
  // 6. 执行异步队列，并传入回调
  nextTick(flushSchedulerQueue);
}

// 更新视图的具体方法
function flushSchedulerQueue() {
  let watcher, id;
  // 排序，先渲染父节点，再渲染子节点
  // 这样可以避免不必要的子节点渲染，如：父节点中 v-if 为 false 的子节点，就不用渲染了
  queue.sort((a, b) => a.id - b.id);
  // 遍历所有 Watcher 进行批量更新。
  for (index = 0; index 

2.2 nextTick -- Ajoutez le flushSchedulerQueue entrant au tableau de rappels, puis exécutez la méthode timerFunc.

const callbacks = [];
let timerFunc;

function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  // 1.将传入的 flushSchedulerQueue 方法添加到回调数组
  callbacks.push(() => {
    cb.call(ctx);
  });
  // 2.执行异步任务
  // 此方法会根据浏览器兼容性，选用不同的异步策略
  timerFunc();
}

2.3 méthode timerFunc -- est une méthode asynchrone créée en fonction de la compatibilité du navigateur. Après avoir exécuté cette méthode, la méthode flushSchedulerQueue sera appelée pour des mises à jour spécifiques du DOM.

let timerFunc;
// 判断是否兼容 Promise
if (typeof Promise !== "undefined") {
  timerFunc = () => {
    Promise.resolve().then(flushCallbacks);
  };
  // 判断是否兼容 MutationObserver
  // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} else if (typeof MutationObserver !== "undefined") {
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  // 判断是否兼容 setImmediate
  // 该方法存在一些 IE 浏览器中
} else if (typeof setImmediate !== "undefined") {
  // 这是一个宏任务，但相比 setTimeout 要更好
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 如果以上方法都不知道，使用 setTimeout 0
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// 异步执行完后，执行所有的回调方法，也就是执行 flushSchedulerQueue
function flushCallbacks() {
  for (let i = 0; i 

2.4 Améliorer le jugement logique

2.4.1 Juger le drapeau has pour éviter d'ajouter le même observateur dans une file d'attente

2.4.2 Juger le drapeau en attente afin que tous les observateurs puissent être traités en un seul tick ; Mise à jour ;

2.4.3 Déterminez l'indicateur de vidage et traitez le nouveau Watcher qui peut être généré lorsque le Watcher est rendu.

　Si la condition v-if est déclenchée, le nouveau rendu Watcher est ajouté.

astuce : nextTick est juste une tâche asynchrone simplement simulée via Promise, setTimeout et d'autres méthodes.

3. Pourquoi this.$nextTick peut-il obtenir le DOM mis à jour ?

Appeler this.$nextTick appelle en fait la méthode nextTick dans la figure et exécute la fonction de rappel dans la file d'attente asynchrone. Selon le principe du premier entré, premier sorti, la file d'attente asynchrone de mise à jour déclenchée par la modification des données sera exécutée en premier. Une fois l'exécution terminée, un nouveau DOM sera ensuite généré lorsque la fonction de rappel de this.$nextTick sera exécutée. exécuté, l'élément DOM mis à jour peut être obtenu.

// 我们使用 this.$nextTick 其实就是调用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};

Résumé : Le principe de la mise à jour asynchrone de vue

• Lorsque vous modifiez les données dans Vue, tous les observateurs liés à ces données seront amenés à se mettre à jour.

• Tout d'abord, tous les observateurs seront ajoutés à la file d'attente.

• Ensuite, appelez la méthode nextTick pour effectuer la tâche asynchrone.

• Dans le rappel de la tâche asynchrone, triez les Watchers dans la Queue puis effectuez la mise à jour du DOM correspondante.

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

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!