Четыре примера работы с Vue.js

Четыре примера работы с Vue.js

От автора: вот несколько приемов, которые я узнал при работе за последний год. Для многих разработчиков Vue js примеры, приведенные мной, будут полезны.

1. Используйте функции стрелок внутри компонентов

ES6 представил новый способ определения функций. Хотя он короче и быстрее вводится, его функционал зависит от того, как он определяет область действия. При использовании старого способа определения функции this диапазон мог не работать так, как мы намеревались. Например:

Функция growUp определяет собственный диапазон, поэтому она не ссылается на объект Person. Вы можете получить желаемое поведение, сохранив экземпляр объекта в переменной или связав область действия с родительским контейнером.

Или вместо этого мы могли бы просто использовать функцию стрелки. Поскольку она автоматически связывает свой диапазон с родительским, нет необходимости в дополнительных «исправлениях».

Более лаконично, правда!?

2. Используйте компоненты Single File

Компоненты Single File — одна из моих любимых функций Vue.js. Она позволяет нам определять повторно используемые шаблоны и отдельные части нашего приложения. Для использования компонентов Single File необходимы инструменты сборки. Существует несколько способов определения компонентов Vue. Например:

Теперь тот же компонент, в качестве компонента Single File:

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

3. Глобальные плагины

В более крупных приложениях мы, вероятно, повторно используем те же самые методы, вычисленные свойства или даже компоненты. Вместо того, чтобы переписывать методы и импортировать компоненты Single File внутри каждого компонента, мы можем определить их один раз и установить в качестве глобального плагина. Мы могли бы определить все компоненты и помощники в одном компоненте:

Или мы могли бы создать плагин и установить его:

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

4. Используйте Vuex для управления состояниями

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

Заманчиво передавать данные в качестве prop для компонентов и использовать сообщения Event Bus для обработки обновлений, но при таком подходе код быстро становится раздутым и трудно поддерживаемым.

Vuex подходит для сценариев, когда нам нужно использовать несколько компонентов, которые все хотят использовать одно и то же состояние. Вместо того, чтобы передавать все данные через prop дочерних компонентов, Vuex может хранить все состояния и предоставлять доступ к ним для всех компонентов.

С помощью Vuex мы можем определить состояния (данные), геттеры, действия и мутации, которые могут позволить нам делать что угодно.

Используйте Vuex в компоненте:

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

Заключение

С Vue.js может быть очень интересно работать с учетом того, что у вас есть некоторые знания, лучшие практики и полезные инструменты. Хотя в настоящее время мне нравится работать с Vue.js, это не всегда было так.

Автор: Jesus Galvan

Источник: //itnext.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: