Привет. Перевод данной статьи подготовлен специально для студентов курса «Разработчик JavaScript» , который начнется на следующей неделе.
Голос Чуи
Немного обо мне — меня зовут Вайбхав, я из Five2One. Я занимаюсь VueJS уже добрых два года (начиная с версии 1.0) и в основном помогал создавать и обучать три крупнейших кодовых базы VueJS в Сиднее.
Этот код служит миллионам людей, поэтому моя работа — не просто создавать масштабируемые шаблоны кода, но и в значительной степени заботиться о его производительности.
Видите ли, обычно небольшие стартапы и кодовые базы ориентированы на то, чтобы выпустить код в мир и быстро доставить продукт клиенту, и в этом мы преуспеваем — вы можете проверить нашу работу на Five2one.com.au, но помимо этого, инженеры по качеству, наша цель — заботиться о производительности и масштабируемости.
Давайте сразу перейдем к делу — поговорим о нескольких простых способах повышения производительности вашего приложения VueJS.
Номер один
Здесь мы видим «функциональный» шаблон, который не имеет объявленного состояния и имеет дело только с реквизитами.
Его можно легко создать в функциональном компоненте на основе Vue, используя метод рендеринга.
https://vuejs.org/v2/guide/render-function.html
Если вы прочитаете это, вы увидите прохождение реквизита с помощью functional: true
Итак, простое решение для этого решения приведено ниже: 
Таким образом, вам не нужно беспокоиться об изменении синтаксиса шаблона, вы можете придерживаться его и при этом наслаждаться роскошью синтаксиса Vue.
БЫСТРОЕ РЕДАКТИРОВАНИЕ: поскольку это функциональный компонент, его контекст не существует, поэтому для доступа к реквизитам необходимо использовать props.name — спасибо Динешу Мадханлалу за упоминание.
Второй простой способ
Использование поддержки активности для динамически загружаемых компонентов.
Иногда мы загружаем компоненты на лету, используя Vue. Мы можем переключаться между компонентами, загружаемыми динамически.
Чтобы мы могли сохранять состояние и не допускать перезагрузки данных при переключении компонентов, обертка DOMless — хорошее решение для ускорения процесса.
Третий простой способ
Это будет немного более очевидным для большинства, учитывая, как работает система vDOM в Vue. Цель vDOM — выступать в качестве промежуточного средства обновления и отслеживать (очень эффективно) изолированные изменения в пользовательском интерфейсе проекта и запускать изолированные повторные рендеринги этих целевых компонентов вместо перерисовки всего экрана.
Часто мы можем создать компонент, у которого есть оболочка, которая отображается несколько раз, и какая-то другая часть того же шаблона должна выполнять МНОГО работы каждый раз, когда перерисовывается другая часть шаблона.
Простое решение — просто разделить файл на компоненты.
Если дочерний элемент не зависит от родителя по данным, он должен быть обработан без проблем.
Четвертый простой способ
Использование анонимных функций в событиях CTA. Всякий раз, когда анонимная функция передается в «onClick» кнопки (я видел этот шаблон среди разработчиков, пришедших из React, потому что в React это один из способов передачи пользовательских данных в функцию), лучше не передавать анонимная функция.Причина в этом.
Рассмотрим пример ниже: 
Здесь происходит то, что каждый раз, когда длина div увеличивается (например, индикатор выполнения), все кнопки также перерисовываются.
Технически они не должны этого делать, потому что в них ничего не меняется, верно? Никаких обновлений реквизита, обновлений данных и т. д. Это трюк, JS взаимодействует с анонимными функциями в памяти, то есть каждый раз, когда происходит повторный рендеринг, создается новый экземпляр анонимной функции и алгоритм сравнения выбирает его как новый объект, следовательно, перерисовывает кнопки даже если это не нужно.
К счастью, Vue настолько уникален, что он достаточно умен, чтобы понимать, что ни одна функция, вызываемая сама по себе, не должна вызываться до тех пор, пока не произойдет событие, к которому она прикреплена, поэтому, даже если это IIF, Vue делает ее переходником.
что задерживает выполнение.
Если вы хотите перестраховаться, всегда полезно создать замыкание, возвращающее другую функцию, чтобы функция-оболочка имела только один экземпляр и не вызывала повторного рендеринга.
Магия 5-й простой способ
Это так же просто, в нем есть серые области, и это не общее решение.Используйте этот метод только в тех случаях, когда на странице много компонентов и переключение отображения компонентов происходит быстро.
Да, я говорю об использовании v-if или v-show. Между ними огромная разница.
V-if = false никогда не будет отображать компонент с отключенной директивой.
Поэтому, если этот компонент переключается несколько раз за короткий промежуток времени, это влияет на производительность, поэтому использование v-show в таких ситуациях работает очень хорошо.
Однако загвоздка в том, что в ситуации, когда вы добавляете v-show к компоненту, и этому компоненту необходимо выполнить тяжелую операцию при первом рендеринге, эта операция будет выполнена независимо от того, является ли v-show истинным.
или ложь.
Стоит отложить использование v-if до тех пор, пока компонент действительно не понадобится.
Помните, что v-show устанавливает значение отображения CSS только для отображаемого компонента: none, если компонент все еще «рендерится».
Однако даже если у этого компонента большая начальная нагрузка, если он постоянно переключается и этот метод приходится выполнять каждый раз, лучше сделать v-show. Все сводится к потребностям пользователя.
Надеюсь, это помогло вам всем! Если вам это понравилось, обязательно следите за похожими темами: Твиттер:x.com/ @veebuv Вот такой получился перевод. Ждем ваших комментариев, друзья.
Теги: #JavaScript #frontend #vue.js #vue #оптимизация
-
Электроника Промышленность
19 Oct, 24 -
Рекордная Сделка На Облачном Рынке
19 Oct, 24 -
Last.fm Сотрудничает С Sony Bmg
19 Oct, 24
