Источник: Nuances of Programming
Vue JS создан Эваном Ю и 234+ любителями в сообществе. Это прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из простой базовой библиотеки, которая фокусируется только на уровне представления, и экосистемы поддержки библиотек, помогающей решать сложные задачи в больших одностраничных приложениях. В этом посте вы познакомитесь с наблюдателями — захватывающей концепцией, которая поможет отточить мастерство.
Подготовка
Этот пост для разработчиков веб-интерфейсов, уже использующих Vue, поэтому предполагается, что читатели знакомы с установкой. Вот зависимости, которые должны быть установлены до начала рассмотрения наблюдателей:
- Node.js 10.x+. Версия проверяется так: node -v.
- npm 6.7+.
- Крайне рекомендую Visual Studio Code.
- Последний Vue JS.
- Vue CLI 3.0.
- Для начала удалите и снова установите Vue CLI:
npm uninstall -g vue-clinpm install -g @vue/cli
Или загрузите готовый стартовый проект:
- Распакуйте его.
- Войдите в папку проекта и выполните команду ниже, чтобы установить зависимости:
npm install
Что такое наблюдатели?
Vue JS ориентирован на слой представления, поэтому основан на шаблонах. Однако при кодировании разработчики могут настолько увлечься простотой использования, что начинают переполнять шаблоны логикой. Vue не одобряет это и рекомендует разбивать приложение на компоненты ради модульности.
Именно здесь в игру вступают наблюдатели. Представьте, что следите за свойством компонента, реагируя на его изменение. Конечно, можно работать с событиям на чистом JavaScript, но Vue предоставляет способ проще, без дополнительных настроек, даже без необходимости настройки слушателей событий.
Почему это важно?
В Vue наблюдатели создают платформу, чтобы отслеживать изменения в свойствах представления. Наблюдатели — альтернатива вычисляемым свойствам. Другая важная вещь заключается в том, что с наблюдателями можно имитировать поведение из созданного хука жизненного цикла.
Синтаксис
Демо: что нам понадобится
Чтобы продемонстрировать наблюдателя, создадим игру для подсчета денег. Если вы следовали инструкциям поста с самого начала, то перейдите к файлу app.vue и удалите тег изображения, а затем откройте файл test.vue в папке компонентов и скопируйте туда этот код:
Внутри этого блока жирным шрифтом показано, как устанавливаются наблюдатели. Настроено отслеживание свойств Джек и Джилл. Наблюдатели позволяют определить логику отслеживающих операций внутри функций, позволяя принимать два аргумента: oldValue и newValue. Чтобы проверить это, измените блок кода наблюдения в test.vue на такой:
Приложение можно перезапустить с помощью следующей команды:
npm run serve
Абстрагирование метода жизненного цикла
Последняя функция — абстрагирование метода жизненного цикла. Если есть свойства, которые хотите загрузить, или функция, запускаемая при инициализации экземпляра Vue, то обычно для определения логики или поведения применяется хук жизненного цикла. С наблюдателями это возможно без хука.
Допустим, в нашем примере Джек и Джилл уже получили по $1, прежде чем игра началась. Это простой пример для вызова функции при инициализации. Замените сценарий test.vue на блок кода ниже:
Сделайте наблюдателя объектом и задайте ему два свойства:
- handler — имя запускаемой при инициализации функции.
- immediate — указывает, имитировать ли хук жизненного цикла.
Приложение перезапускается так:
npm run serve
Итоги
Вы познакомились с наблюдателями Vue JS. Было показано, как настраивать их и как абстрагировать созданный метод жизненного цикла. Счастливых хаков!
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Nwose Lotanna: Introducing Watchers in Vue JS
