Вы неправильно понимаете Vue nextTick

Vue.js
Вы неправильно понимаете Vue nextTick

Vue nexTick

Друзья, которые использовали Vue, знают, что nextTick во Vue может получить обновленный DOM.Сегодня я объясню, что именно делается в nextTick?

Прежде чем начать объяснять, нам нужно знать концепцию цикла событий.

Event Loop

Цикл событий переводится какцикл событий, Цикл событий будет включать одну или несколько очередей задач, а непрерывный поток будет извлекать самую раннюю задачу, вошедшую в очередь, из очереди для выполнения, а извлеченная задача называетсямакрозадача, у каждой макрозадачи есть источник задачи, и после обработки каждой макрозадачи макрозадача, которая входит в ближайшее время, удаляется из очереди и выполняется повторно.

Источник задачи:

```
    1. script
    2. 事件
    3. Dom交互
    4. I/O
    5. UI Render
    6. setTimeout
    7. setInterval
    8. requestAnimationFrame
    .....
```

То есть в вышеуказанных ситуациях будет сгенерирована макрозадача и помещена в очередь.

микротаск

После выполнения каждой макрозадачи основной поток проверяет该macroTaskПуста ли следующая микроЗадача, если нет, то она будет выниматься от ранней к поздней в хронологическом порядке.Если на пути встретится новая микроЗадача, она продолжит подталкивать микроЗадачу в очередь микроЗадачи.

Рендеринг пользовательского интерфейса (фокус)

Вместе сПустая очередь miscroTask, основной поток будет выполнять UI Render, то есть интерфейс рендеринга, но браузер не будет рендерить интерфейс каждый раз под задачей UI Render.ms частота обновления для рендеринга (не точная оценка), макроТаска обычно меньше чем 16,7 мс, поэтому браузер каждый раз будет рендерить в зависимости от ситуации

Итог следующего цикла

1. 从macroTask队列里取出最早添加进去的
2. 开始执行task, 途中如果遇到新的macroTask，就会将其添加到macroTask队列的最后面
3. 执行完macroTask之后，event loop会去寻找microTask队列
4. 同样的道理，如果途中遇到新的microTask，将其放入该macroTask下的microTask队列最后面
5. 执行完microTask，会执行UI Render macroTask
6. 浏览器会根据现有情况决定是否更新DOM，通常是按照60HZ的频率去更新
7. 至此，一个event loop结束了

nextTick

Мы начали анализировать nexttick

Судя по картинке выше

  1. Мы видим несколько способов написания nextTick:
    1. this.$nextTick(cb)
    2. this.$nextTick().then(cb)
  1. Все cb будут помещены в массив callbacks, однократное ожидание вызова

На рисунке выше мы видим, что основнойtimerFuncЭта функция вызывает обратный вызов, далее мы остановимся на этой функции ниже, сначала посмотрим на исходный код

Мы видим, что timerFunc имеет разные назначения в разных ситуациях.

  1. Во-первых, он определит, поддерживает ли браузер атрибут promise.Если да, то timerFunc будет назначен на Promise.Тут есть небольшая проблема, то есть под ios хоть и есть объект promise, но он будет запихнут в очередь микрозадач. , но очередь не будет обновлена. В это время вам нужно добавить макрозадачу, чтобы принудительно обновить очередь микрозадач

  2. MutationObserver, я полагаю, что многие люди не знают об этом API, это API, который может отслеживать изменения DOM и принадлежит microTask,Более низкий приоритет, чем PromiseПосле создания нового текстового узла вручную измените его текстовый узел, чтобы вызвать микрозадачу,

    Здесь есть небольшая проблема:

    После успешного рендеринга текстового узла означает ли это, что другие рендеринги DOM успешны?

    Это альтернатива, используемая в основном потому, что это микрозадача, а не потому, что она прослушивает DOM.

  3. После того, как все микрозадачи потерпят неудачу, лучше всего выбрать setImmediate. Это API, который может быть только у высокоуровневых браузеров IE и Edge. Он в основном используется при расчете больших объемов данных.

  4. Последний setTimeout

У вас есть какие-то сомнения, когда вы видите это?

В приведенном выше коде не указано, что nextTick выполняется только после прослушивания обновлений DOM? Какое помещение голова была немного по дуангу

Тогда следующее, что нужно сказать, это самое важное

Обновление дерева DOM происходит в режиме реального времени, обновление дерева DOM происходит в режиме реального времени, а обновление дерева DOM происходит в режиме реального времени., Важное сказано трижды, а это значит, что вам не нужно следить за обновлением DOM, вы можете получать обратную связь в режиме реального времени о работе DOM, предыдущая строка кода управляет DOM, а следующая строка может получить Это

Тогда у некоторых людей возникнут сомнения, что именно делает nextTick?

Роль nextTick состоит в том, чтобы один за другим вынимать Watchers из очереди,и измените данные для одновременного отображения DOM, Мы знаем, что стоимость работы с DOM высока. После того, как браузер откроет веб-страницу, он запустит процесс. Процесс состоит из потоков. Затем при открытии,

1. GUI渲染线程
2. js引擎线程(主线程)
3. EventLoop轮训处理线程
4. 其他线程，例如网络

Межпоточные операции обходятся дорого, поэтому рендеринг Dom за один раз может эффективно оптимизировать производительность! !

Суммировать

nextTick не используется для отслеживания изменений DOM, потому что изменения DOM можно получать в режиме реального времени, его роль заключается в одновременном изменении данных и отображении DOM.

3Q!

Категории