Vue.js – один из самых популярных фреймворков для фронтенд-разработки и один из самых простых в изучении. Рассказываем, на что нужно обратить внимание желающим освоить его с нуля новичкам. Обсудить

Vue.js относительно несложен в изучении, но обладает мощной функциональностью и отличной производительностью. Чтобы немного разобраться со всеми нюансами разработки на Vue и продвинуться на шаг вперед, стоит ознакомиться с рядом важных особенностей фреймворка:

1. Поймите принцип реактивности

Реактивность – это простая концепция, необходимая для интерфейсной разработки. Вот небольшой пример:

<h1> {{name}} </h1>

При изменении значения name пользовательский интерфейс будет соответствующим образом обновлен. Однако это слишком просто и не раскрывает всей сути.

         <template>   <div>     <p>{{ myObject.message }}</p>   </div> </template>      

           export default { data() {    return {      myObject: {}    } }, mounted() {    this.myObject.message = 'Hello'; }   };     

В приведенном коде мы определяем myObject как пустой объект в функции data( ), а затем присваиваем myObject.message значение. Однако в {{ myObject.message }} при получении этого значения ничего не отображается. Причина в том, что Vue не знает о существовании свойств myObject.message и поэтому не может среагировать на изменения его значения. Как это исправить?

Есть несколько способов убедиться, что Vue видит изменения myObject.message. Самый простой – инициализировать его с пустым или нулевым значением:

myObject: { message: ' ' }

Если myObject.message присутствует в функции data( ), то Vue определит это и среагирует на изменения его значения, обновляя пользовательский интерфейс.

Еще один способ убедиться в отзывчивом UI – обновить весь объект myObject:

this.myObject = {message: 'Hello world'}.

В этом случае, данные на странице также будут изменяться.

Хорошо понимая реактивность, вы можете делать следующее:

1. Быстро находить ошибки в приложениях, при которых пользовательские данные не обновляется;
2. Определять, когда элементы изменяются, а когда отображаются повторно;
3. Понимать как обрабатываются свойства объекта в приложении Vue.

2. Постройте оптимальную связь между элементами

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

Самый простой способ осуществить связь между ними – использовать реквизит props. Реквизит передает данные от родителя к потомку. Они могут быть разных типов: строки, логические значения, массивы и т. д.

<component: message = "myObject.message" />

Свойства формируют односторонний поток данных: всякий раз, когда в myObject.message изменяется родительский компонент, свойство message будет соответствующим образом обновляться. Делать в обратном порядке – неверно!

Вы не должны изменять значение props в дочерних компонентах. Если же вы все-таки попытаетесь изменить их, Vue предупредит, что так делать не стоит. Если вам нужно передать значения от дочернего компонента родительскому, нужно сгенерировать событие. Например, следующим образом:

          <template>    <div>  <child-component @button-clicked="processUpdate" />    </div>  </template>     

           export default {    methods: {     processUpdate(value) {      // This will output: true      console.log(value);     }    }   }     

         <!-- Child Component --> <template>   <button @click="notify">Notify Parent</button> </template>     

           export default {    methods: {     notify() {         // вместо true мы можем написать любое значение, например object         this.$emit('button-clicked', true);       }     }   }     

Используйте $emit для передачи одного или нескольких значений или событий от дочерних компонентов к родительским. Значения могут быть любого типа.

3. Решите проблемы с производительностью

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

Утечки памяти (memory leaks) – распространенная проблема производительности веб-приложений. Хотя сам Vue не вызывает их без причины, это может произойти при включении сторонних библиотек или из-за ошибочного кода. Особенно важно избегать утечек памяти при создании одностраничных приложений (SPA), потому что по умолчанию пользователи не обновляют вкладки в браузере и приложение начинает собирать мусор.

Не вдаваясь в подробности, у Vue есть официальное руководство по предотвращению утечек памяти. Если вы хотите стать разработчиком, стоит внимательно его прочитать.

Внешние библиотеки, вроде React и Vue, делают нас ленивыми. Мы не совсем понимаем, что происходит в процессе рендеринга – просто используем v-for и ожидаем, что все будет работать. Есть много неожиданных причин, по которым приложение Vue может иметь проблемы с производительностью, чрезмерно затрачивая ресурсы на рендеринг:

1. Создается слишком много элементов DOM;
2. Страница обновляется слишком часто;
3. Используются сторонние компоненты, на рендеринг которых требуется много времени.

Все вышеперечисленное нужно учитывать при дальнейшей работе с фреймворком.

Оптимизируйте обработку событий, а также используйте функции-ограничители throttle или debounce. Дело в том, что прокрутка, наведение курсора мыши и другие события могут запускать обработчик десятки раз в секунду. Это больше относится к JavaScript в целом, однако про такие вещи не стоит забывать.

4. Изучите экосистему Vue

Чтобы продвинуться в разработке Vue, вам нужно будет узнать о составляющих его экосистему пакетах. Для большинства приложений потребуется по крайней мере один из них, но для освоения фреймворка следует ознакомиться со всеми тремя.

Vuex

Большинство современных приложений (особенно SPA) полагаются на своего рода управление состоянием. Vuex – это официальная библиотека управления состоянием для приложений Vue, хорошо интегрированная с официальными инструментами разработки. Она служит централизованным хранилищем, к которому все компоненты могут получить доступ для работы с глобальными данными приложения.

Vue Router

Использование Vue без Vue Router – это редкость, но в некоторых проектах такое встречается. Более подробная информация о нем доступна на официальном сайте. Я просто упомяну, что изучение vue-router является обязательным условием для создания большинства современных SPA-приложений.

Vue SSR

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

5. Хорошо организуйте приложение

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

Существует несколько причин, по которым использование небольших компонентов идет на пользу вашему приложению:

1. Вы можете повторно их использовать в проекте;
2. Ваш код становится более чистым и организованным;
3. Vue эффективнее отображает дочерние компоненты в циклах v-for.

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

6. Используйте миксины

Миксины позволяют сделать следующее:

1. Повторно использовать код в проекте;
2. Писать код только один раз по принципу DRY(Don’t Repeat Yourself);
3. Упростить рефакторинг и сопровождение кода.

Миксины предоставляют нам свободу действий. С их помощью вы можете создать переменную, включающую общие функции, условия и свойства компонентов. Возможности безграничны, но смысл понятен: использование миксинов – хорошая практика.

7. Применяйте расширенные директивы

Помимо v-for, v-if и других общих директив, Vue имеет некоторые директивы, которые являются менее распространенными, но очень полезными.

***

Используйте v-once для вывода значения однократно, если хотите сделать его нереактивным. При последующих его изменениях, значение больше не будет отображаться, что может помочь вам оптимизировать производительность в определенных сценариях:

<span v-once> {{имя}} </span>

***

Для событий v-on есть несколько очень удобных модификаторов. Очень часто используется @click.prevent, который автоматически вызывает preventDefault() у элемента на странице.

<a href="#" @click.prevent="processClick"> Нажми меня </a>

Полный список модификаторов событий можно увидеть тут .

***

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

***

Vue.js довольно прост в изучении, но с самого начала стоит убедиться, что вы делаете все правильно. Для самопроверки уделяйте побольше времени официальной документации и у вас все получится. Удачи в освоении этого замечательного инструмента!