Серия Vue3.0 — «Как производительность vue3.0 становится быстрее?»

Vue.js

在这里插入图片描述

предисловие

  1. Сначала изучите vue2.x, многие материалы 2.x все еще сохраняются;
  2. Сначала изучите TypeScript, vue3.0 переписан с помощью TS, и если вы хотите знать почему, вы должны изучить TS.

Зачем изучать vue3.0?

  • Производительность в 1,2-2 раза выше, чем у vue2.x.
  • Компилировать по запросу, меньше, чем vue2.x
  • API композиции (аналогично React Hook)
  • Улучшенная поддержка ТС
  • Открытый пользовательский API рендеринга
  • более продвинутые компоненты

Как vue3.0 становится быстрее?

  • Оптимизация метода сравнения

Виртуальный дом в vue2.x — это полное сравнение. И vue3.0 добавил статические теги. При сравнении с последним виртуальным узлом сравнивается только узел с флагом исправления, и конкретное содержимое текущего сравниваемого узла может быть известно через информацию о флаге.

Возьмем пример, ниже приведен фрагмент кода.

<div>
  <p>标签</p>
  <p>{{msg}}</p>
</div>

Алгоритм сравнения vue2.x представляет собой сравнение полного количества деревьев виртуальных домов.在这里插入图片描述Когда алгоритм сравнения vue3.0 создает виртуальный дом, он добавит статические теги в зависимости от того, изменилось ли содержимое в доме. Сравниваются только узлы с флагами исправления.

在这里插入图片描述

Мы можем не очень хорошо понимать приведенную выше картинку, поэтому давайте посмотрим на нее интуитивно по-другому. Как вы можете видеть на изображении ниже, в элементе, где существует привязка данных, есть статическая разметка.1, тестовый URL:https://vue-next-template-explorer.netlify.app/.

在这里插入图片描述

  • hoistStatic (статический подъемник)

В vue2.x вне зависимости от того, участвует ли элемент в обновлении, он каждый раз будет пересоздаваться и затем рендериться. В vue3.0 элементы, не участвующие в обновлении, будут продвигаться статически, создаваться только один раз и могут повторно использоваться непосредственно во время рендеринга.

Снова заходим на тестовый сайт и ставим галочку напротив статически отмеченной опции, в этот раз мы найдем разницу, метка с фиксированными данными с правой стороны здесь.<p>标签</p>, был размещенrenderвне функции. Таким образом, это будет создано только один раз глобально, поэтому производительность будет значительно улучшена.

在这里插入图片描述

  • cacheHandlers (кэш прослушивателя событий)

По умолчанию, какonClickСобытие будет рассматриваться как динамическая привязка, поэтому его изменения будут отслеживаться каждый раз, но, поскольку это одна и та же функция, нет необходимости отслеживать изменения, просто кэшируйте их для повторного использования. Хорошо, давайте сравним до и после включения кеша прослушивателя событий.

Кэширование прослушивателя событий не включено

Мы увидим, что есть статический маркер, поэтому он отслеживается каждый раз.

在这里插入图片描述 Включить кэширование прослушивателя событий

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

在这里插入图片描述

Эпилог

Добро пожаловать, чтобы обратить внимание на мой публичный номер "Дорога к переднему бедствию"

​

ключевые слова ответаэлектронная книга, вы можете получить около 12 популярных электронных книг.

​

ключевые слова ответаКрасная книга 4-е изданиечтобы получить последнюю электронную книгу «Расширенное программирование на JavaScript» (4-е издание).

​

Вы также можете добавить меня в WeChat. Я привлек многих крупных ИТ-специалистов и создал группу по обмену техническими данными и статьями. Приглашаем присоединиться.

​

  • автор:Дорога золотых бобов Вама

  • Основные направления:Фронтенд разработка

  • Мой WeChat:maomin9761

  • Публичный аккаунт WeChat:Дорога к переднему бедствию

​ ​

Категории