Vue nexttick что это
Что такое nextTick или что он делает в VueJs
Я читал документы, но я не могу этого понять. Я знаю, какие данные, вычисляемые, наблюдаемые, методы делают, а что использовать nextTick() для vuejs?
ОТВЕТЫ
Ответ 1
nextTick позволяет вам что-то сделать после того, как вы изменили данные, а VueJS обновил DOM на основе изменения данных, но до того, как браузер отобразил те, которые были изменены на странице.
Как правило, разработчики используют встроенную функцию JavaScript setTimeout для достижения аналогичного поведения. Но, используя setTimeout отказывается от контроля над браузером, прежде чем он вернет вам управление через ваш обратный вызов.
Вы можете визуализировать это поведение, создав небольшой компонент, например:
Теперь замените this.$nextTick with setTimeout
Проверьте этот скрипт, чтобы увидеть его вживую
Надеюсь, это было ясно.
Чтобы понять, как Vue реализует это, вам нужно понять концепцию цикла событий и микротоков.
После того как вы поняли эти понятия (er), проверьте исходный код nextTick.
Ответ 2
Next Tick в основном позволяет вам запускать некоторый код после того, как vue повторно визуализировал компонент, когда вы внесли некоторые изменения в реактивное свойство (данные).
Из документации Vue.js:
Отложите обратный вызов, который будет выполнен после следующего цикла обновления DOM. Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
Подробнее об этом читайте здесь.
Ответ 3
Чтобы Праншат ответил на вопрос о разнице между использованием nextTick и setTimeout, более четко, я раздвоил его скрипку: здесь
Вы можете увидеть в скрипте, что при использовании setTimeOut начальные данные очень быстро мигают, когда компонент монтируется перед адаптацией изменения. Принимая во внимание, что при использовании nextTick данные перехватываются, изменяются перед рендерингом в браузер. Таким образом, браузер показывает обновленные данные, даже не зная старых. Надеюсь, что очищает две концепции одним махом.
Ответ 4
В документации сказано:
Отложите обратный вызов, который будет выполнен после следующего цикла обновления DOM. Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
Хм. если поначалу это пугает, не волнуйтесь, я постараюсь объяснить это как можно проще. Но сначала нужно знать 2 вещи:
Его использование редко. Как одна из тех серебряных волшебных карт. Я написал несколько приложений Vue и столкнулся с nextTick() один или два раза.
Его легче понять, когда вы увидели реальные варианты использования. После того, как вы поймете, страх уйдет, и у вас под рукой будет удобный инструмент.
Пойдем на это, тогда.
Хорошо, теперь мы знаем, что он принимает обратный вызов. Так это выглядит так:
Отлично. Этот обратный вызов откладывается (так говорят тысячелетия с задержкой) до…
Хорошо. Мы знаем, что Vue выполняет обновления DOM асинхронно. Он предлагает способ сохранения этих обновлений до тех пор, пока они не потребуются. Создает очередь обновлений и сбрасывает ее при необходимости. Затем DOM «исправляется» и обновляется до последней версии.
Какие?
Позвольте мне повторить попытку: представьте, что ваш компонент делает что-то действительно важное и умное, например this.potatoAmount = 3. Vue не будет автоматически перерисовывать компонент (и, следовательно, DOM) автоматически. Это очередь в очередь необходимых изменений. Затем в следующем «тике» (как в часах) очередь очищается, и обновление применяется. Тада!
Хорошо! Итак, мы знаем, что мы можем использовать nextTick() чтобы передать функцию обратного вызова, которая выполняется сразу после того, как данные установлены и DOM обновлен.
Как я уже говорил ранее. не так часто. Подход «потока данных», который выталкивает Vue, React и другой от Google, о котором я не буду упоминать, в большинстве случаев делает его ненужным. Тем не менее, иногда нам нужно ждать, пока некоторые элементы появятся/исчезнут/будут изменены в DOM. Это когда nextTick пригодится.
Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
Именно так! Это последнее определение, которое Vue Docs предоставил нам. Внутри нашего обратного вызова DOM был обновлен, поэтому мы можем взаимодействовать с «самой обновленной» версией.
Докажите это
Ладно ладно. Посмотрите консоль, и вы увидите, что значение наших данных обновляется только внутри обратного вызова nextTick:
Что такое nextTick или что он делает в VueJs
Главный редактор: Xavier Shelton, электронная почта
Я читаю документацию, но не понимаю. Я знаю, что делают данные, вычисление, наблюдение, методы, но что nextTick() использовать для vuejs?
nextTick позволяет вам что-то делать после того, как вы изменили данные, а VueJS обновил DOM на основе ваших изменений данных, но до того, как браузер отобразит те, которые были изменены на странице.
Обычно разработчики используют встроенную функцию JavaScript setTimeout для достижения аналогичного поведения. Но, используя setTimeout передает контроль браузеру, прежде чем он вернет контроль вам через ваш обратный вызов.
Вы можете визуализировать это поведение, создав небольшой компонент, подобный следующему:
Запустите свой локальный сервер. Вы увидите сообщение Three отображается.
Теперь замените свой this.$nextTick с участием setTimeout
Проверьте эту скрипку, чтобы увидеть ее вживую
Надеюсь, это было ясно.
Чтобы понять, как это реализует Vue, вам необходимо понять концепцию цикла событий и микрозадач.
Как только вы проясните эти концепции (э-э), проверьте исходный код для nextTick.
Контент был взят из Автор Адрией Фонкуберта
В документации Vue говорится:
Отложить выполнение обратного вызова после следующего цикла обновления DOM. Используйте его сразу же после изменения некоторых данных, чтобы дождаться обновления DOM.
Его использование необычно. Как одна из тех серебряных волшебных карт. Я написал несколько Vue apps и один или два раза столкнулся с nextTick ().
Это легче понять, если вы увидели несколько реальных вариантов использования. После того, как вы поймете эту идею, страх уйдет, и у вас будет под рукой удобный инструмент.
Тогда давай пойдем на это.
Хорошо, теперь мы знаем, что он принимает обратный вызов. Вот так это выглядит:
Отлично. Этот обратный вызов отложен (так миллениалы говорят, что отложен) до…
Хорошо. Мы знаем это Vue выполняет обновления DOM асинхронно. В нем есть способ «хранить» эти обновления до тех пор, пока не потребуется их применить. Он создает очередь обновлений и при необходимости сбрасывает ее. Затем DOM «исправляется» и обновляется до последней версии.
Какая?
Позвольте мне попробовать еще раз: представьте, что ваш компонент делает что-то действительно важное и умное, например this.potatoAmount = 3. Vue не будет повторно отображать компонент (и, следовательно, DOM) автоматически. Он поставит в очередь требуемые изменения. Затем, в следующем «тике» (как в часах), очередь очищается и применяется обновление. Тада!
Хорошо! Итак, мы знаем, что можем использовать nextTick() передать функцию обратного вызова, которая выполняется сразу после данные установлены, и DOM обновлена.
Как я уже сказал ранее… не так часто. Подход «потока данных», которым руководствуются Vue, React и другой продукт от Google, о котором я не буду упоминать, в большинстве случаев делает его ненужным. Тем не менее, иногда нам нужно дождаться появления / исчезновения / изменения некоторых элементов в DOM. Вот тут-то и пригодится nextTick.
Используйте его сразу после того, как вы изменили некоторые данные, чтобы дождаться обновления DOM.
Точно! Это последняя часть определения, которую нам предоставила документация Vue. Внутри нашего обратного вызова модель DOM была обновлена, поэтому мы можем взаимодействовать с ее «самой последней» версией.
Докажите это
Ладно ладно. Посмотрите на консоль, и вы увидите, что значение наших данных обновляется только внутри обратного вызова nextTick:
Вариант использования
Представьте, что вам нужно выполнить какое-то действие при монтировании компонента. НО! не только компонент. Вам также нужно подождать, пока все его дочерние элементы не будут смонтированы и доступны в DOM. Черт! Наш смонтированный крючок не гарантирует, что визуализируется все дерево компонентов.
В двух словах
Вам нужно дождаться DOM, может быть, потому что вам нужно выполнить какое-то преобразование или вам нужно дождаться, пока внешняя библиотека загрузит свои материалы? Затем используйте nextTick.
Некоторые люди также используют nextTick в своих модульных тестах как способ убедиться, что данные были обновлены. Таким образом, они могут протестировать «обновленную версию» компонента.
Не волнуйся. Оба (почти) одинаковы. Vue.nextTick() относится к глобальному методу API, а vm.$nextTick() это метод экземпляра. Единственная разница в том, что vm.$nextTick не принимает контекст в качестве второго параметра. Это всегда связано с this (также известный как сам экземпляр).
Последний кусок прохлады
Next Tick в основном позволяет вам запускать некоторый код после того, как vue повторно отрендерил компонент, когда вы внесли некоторые изменения в реактивное свойство (данные).
Из документации Vue.js:
Отложите выполнение обратного вызова после следующего цикла обновления DOM. Используйте его сразу после того, как вы изменили некоторые данные, чтобы дождаться обновления DOM.
Об этом подробнее здесь.
Чтобы дать Праншату более четкий ответ о разнице между использованием nextTick и setTimeout, я раздвоил его скрипку: здесь
Вы можете видеть в скрипте, что при использовании setTimeOut исходные данные очень быстро мигают после того, как компонент монтируется, прежде чем адаптировать изменение. Принимая во внимание, что при использовании nextTick данные захватываются, изменяются перед отображением в браузере. Итак, браузер показывает обновленные данные, даже не зная о старых. Надеюсь, что это проясняет две концепции одним махом.
Русские Блоги
Простое понимание nextTick во Vue
В Vue nextTick Когда дело доходит до асинхронного обновления DOM во Vue, это кажется очень интересным, и у меня есть особое понимание. Что о nextTick Исходный код включает в себя много знаний, многие не понимают, давайте представим его на основе некоторых моих собственных идей. nextTick 。
1. Пример
Давайте рассмотрим пример, чтобы узнать об обновлениях DOM во Vue и nextTick Роль.
шаблон
Экземпляр Vue
Перед нажатием
После нажатия
Из рисунка видно, что содержимое, отображаемое msg1 и msg3, все еще находится до преобразования, а содержимое, отображаемое msg2, находится после преобразования. Основная причина в том, что обновления DOM во Vue асинхронны (подробное объяснение будет дано позже).
Два, сценарии применения
Поймите ниже nextTick Основные сценарии применения и причины.
в created() Когда выполняется функция-перехватчик, DOM фактически не выполняет никакого рендеринга.В настоящее время операция DOM ничем не отличается от бесполезной, поэтому здесь должен быть помещен JS-код операции DOM. Vue.nextTick() В функции обратного вызова. Соответствующий mounted() Функция перехвата, поскольку все монтирование и рендеринг DOM были завершены при выполнении функции перехвата, в это время не будет проблем с любыми операциями DOM в функции перехвата.
Конкретные причины подробно описаны в официальной документации Vue:
три, nextTick Анализ исходного кода
эффект
Vue.nextTick Используется для задержки выполнения фрагмента кода, он принимает 2 параметра (функция обратного вызова и контекст, в котором выполняется функция обратного вызова), если функция обратного вызова не предоставлена, она вернет promise Объект.
Исходный код
Прежде всего, сначала поймите nextTick Три важные переменные, определенные в.
Используется для хранения всех функций обратного вызова, которые необходимо выполнить
Используется для обозначения того, выполняется ли функция обратного вызова
Используется для запуска выполнения функции обратного вызова
Далее поймите nextTickHandler() функция.
Эта функция используется для выполнения callbacks Все функции обратного вызова хранятся в.
Далее следует назначить метод триггера для timerFunc 。
Из приведенного выше введения мы можем узнать timeFunc() Этого можно добиться тремя способами.
среди них Promise с участием setTimeout Понятно, что это асинхронная задача, которая будет вызывать определенные функции после синхронной задачи и асинхронной задачи обновления DOM.
Давайте сосредоточимся на MutationObserver 。
MutationObserver Это новый API в HTML5 и интерфейс для мониторинга изменений DOM. Он может отслеживать удаление дочерних узлов, изменение атрибутов, изменение текстового содержимого и т. Д., Происходящие в объекте DOM. Процесс вызова очень простой, но немного необычный: вам нужно сначала привязать к нему обратный вызов:
Давая MutationObserver Конструктор передачи обратного вызова, вы можете получить MutationObserver Экземпляр, этот обратный вызов будет MutationObserver Срабатывает, когда экземпляр обнаруживает изменение.
На этот раз ты просто отдаешь MutationObserver Экземпляр привязан к обратному вызову, который DOM должен отслеживать, отслеживать ли удаление узла или отслеживать изменение свойств, еще не установлен. И назови его observer Этот шаг можно выполнить с помощью метода:
в nextTick Средний MutationObserver Эффект показан на рисунке выше. После мониторинга обновления DOM вызовите функцию обратного вызова.
На самом деле использовать MutationObserver Причина в том nextTick Я хочу, чтобы асинхронный API выполнял асинхронные обратные вызовы, которые я хочу выполнить после выполнения текущего синхронного кода, включая Promise с участием setTimeout Все по этой причине. Что в подробностях также включает microtask В ожидании содержания, временно не понимаю, поэтому подробно рассказывать не буду.
Подробно о реактивности
Мы уже разобрали большую часть основ, так что пришло время нырнуть поглубже! Одна из наиболее примечательных возможностей Vue — это ненавязчивая реактивность. Модели представляют собой простые JavaScript-объекты. По мере их изменения обновляется и представление данных, благодаря чему управление состоянием приложения становится простым и очевидным. Тем не менее, у механизма реактивности есть ряд особенностей, знакомство с которыми позволит избежать появление распространённых ошибок. В этом разделе руководства мы подробно рассмотрим низкоуровневую реализацию системы реактивности Vue.
Как отслеживаются изменения
Геттеры и сеттеры не видны пользователю, но именно они являются тем внутренним механизмом, который позволяет Vue отслеживать зависимости и изменения данных. К сожалению, при таком подходе выведенные в консоль браузера геттеры и сеттеры выглядят не так, как обычные объекты, поэтому для более наглядной визуализации лучше использовать инструменты разработчика Vue-devtools.
В каждый экземпляр компонента добавлен связанный с ним экземпляр наблюдателя, который помечает все поля, затронутые при отрисовке компонента, как зависимости. В дальнейшем, когда вызывается сеттер поля, помеченного как зависимость, этот сеттер уведомляет наблюдателя, который, в свою очередь, инициирует повторную отрисовку компонента.
Особенности отслеживания изменений
Вследствие ограничений JavaScript, есть виды изменений, которые Vue не может обнаружить. Однако существуют способы обойти их, чтобы сохранить реактивность.
Для объектов
Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объекте data для того чтобы Vue преобразовал его и сделал реактивным. Например:
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр. Тем не менее, можно добавить реактивное свойство во вложенные объекты, используя метод Vue.set(object, propertyName, value) :
Для массивов
Vue не может отследить следующие изменения в массиве:
Для решения второй проблемы используйте splice :
Объявление реактивных свойств
Поскольку Vue не позволяет динамически добавлять корневые реактивные свойства, это означает, что все корневые поля необходимо инициализировать изначально, хотя бы пустыми значениями:
Если не задать поле message в опции data, Vue выведет предупреждение, что функция отрисовки пытается получить доступ к несуществующему свойству.
Существуют технические причины для этого ограничения: оно позволяет исключить целый класс граничных случаев в системе учёта зависимостей, а также упростить взаимодействие Vue с системами проверки типов. Но более важно то, что с этим ограничением становится проще поддерживать код, так как теперь объект data можно рассматривать как схему состояния компонента. Код, в котором реактивные свойства компонента перечислены заранее, намного проще для понимания.
Асинхронная очередь обновлений
Что такое nextTick или что он делает в VueJs
Я читаю документы, но не могу этого понять. Я знаю, что делают данные, вычисляют, наблюдают, методы, но для чего используется nextTick() в vuejs?
nextTick позволяет вам что-то делать после того, как вы изменили данные, и VueJS обновил DOM на основе ваших изменений данных, но до того, как браузер отобразил их на странице.
Обычно разработчики используют встроенную функцию JavaScript setTimeout для достижения аналогичного поведения. Но использование setTimeout возвращает управление браузеру, прежде чем оно вернется к вам через ваш обратный вызов.
Вы можете визуализировать это поведение, создав небольшой компонент, подобный следующему:
Теперь замените ваш this.$nextTick с setTimeout
Проверьте эту скрипку на смотрите ее вживую
Надеюсь, это было ясно.
Next Tick в основном позволяет вам запускать некоторый код после того, как vue повторно обработал компонент, когда вы внесли некоторые изменения в реактивное свойство (данные).
Из документации Vue.js:
Отложите обратный вызов, который будет выполнен после следующего цикла обновления DOM. Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
В документации сказано:
Vue.nextTick ([обратный вызов, контекст])
Отложите обратный вызов, который будет выполнен после следующего цикла обновления DOM. Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
Его использование редко. Как одна из тех серебряных волшебных карт. Я написал несколько приложений Vue и столкнулся с nextTick () один или два раза.
Это легче понять, когда вы увидели реальные варианты использования. После того, как вы поймете, страх уйдет, и у вас под рукой будет удобный инструмент.
Давай пойдем на это, тогда.
Хорошо, теперь мы знаем, что он принимает обратный вызов. Так это выглядит так:
Отлично. Этот обратный вызов откладывается (так говорят тысячелетия с задержкой) до…
Позвольте мне повторить попытку: представьте, что ваш компонент делает что-то действительно важное и умное, например _ this.potatoAmount = 3. _ Vue не будет автоматически повторно визуализировать компонент (и, следовательно, DOM). Он будет поставлен в очередь до требуемой модификации. Затем, в следующем «тике» (как в часах), очередь очищается, и обновление применяется. Tada!
Хорошо! Итак, мы знаем, что мы можем использовать nextTick() для передачи функции обратного вызова, которая выполняется сразу после данные установлены, а DOM обновлен.
Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.
В точку! Это последнее определение, которое мы получили Vue docs). В нашем обратном вызове DOM был обновлен, поэтому мы можем взаимодействовать с его «самой обновленной» версией.
Докажите это
Хорошо хорошо. Посмотрите консоль, и вы увидите, что значение наших данных обновляется только внутри обратного вызова nextTick:
Вариант использования
Представьте, что вам нужно выполнить какое-то действие, когда компонент смонтирован. НО! не только компонент. Вам также нужно подождать, пока все дочерние элементы не будут смонтированы и доступны в DOM. Черт! Наш смонтированный крюк не гарантирует, что рендерится все дерево компонентов.
В двух словах
Вам нужно подождать DOM, может быть, потому что вам нужно выполнить какое-то преобразование или вам нужно подождать, пока внешняя библиотека загрузит свои вещи? Тогда используйте nextTick.
Некоторые люди также используют nextTick в своих модульных тестах, чтобы обеспечить обновление данных. Таким образом, они могут протестировать «обновленную версию» компонента.
Не беспокойся Оба (почти) одинаковы. Vue.nextTick() ссылается на метод глобального API, а vm.$nextTick() является методом экземпляра. Единственное отличие состоит в том, что _ vm.$nextTick _ не принимает контекст в качестве второго параметра. Он всегда связан с this (также известен как сам экземпляр).
Последний кусочек прохлады
Контент взят из Автор Адриа Фонтуберта
Чтобы сделать ответ Праншата о разнице между использованием nextTick и setTimeout более явным, я раздвоил его скрипку: здесь
Вы можете увидеть в скрипте, что при использовании setTimeOut начальные данные очень быстро мигают, когда компонент монтируется перед адаптацией изменения. Принимая во внимание, что при использовании nextTick данные перехватываются, изменяются перед рендерингом в браузер. Таким образом, браузер показывает обновленные данные, даже не зная старых. Надеюсь, что очищает две концепции одним махом.