4 Основные функции ES2015 для разработки Vue.js

4 Основные функции ES2015 для разработки Vue.js

От автора: ES2015 (ака ES6) — это текущая спецификация языка JavaScript. Если вы новичок в JavaScript или в последнее время не освежали свои знания в области JavaScript, сообщаем, что в ES2015 появился ряд новых функций, которые делают разработку намного лучше и приятнее.

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

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

1. Стрелочные функции

Стрелочные функции — это новый способ объявления функций JavaScript. Они обеспечивают более короткий синтаксис, и отличаются от обычной функции JavaScript.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Без ограничений this

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

Рассмотрим методы массива JavaScript, требующие функции обратного вызова. Array.filter позволяет вам возвращать новый массив, включая только те элементы, которые соответствуют фильтру, определенному обратным вызовом.

Одной из замечательных особенностей Vue.js является то, что вы можете легко получить доступ к свойствам данных, вычисленным как this.vueProperty свойствам и методам из контекста объекта конфигурации Vue.

Однако, если вы используете регулярную функцию для обратного вызова, к ней будет привязано собственное значение. После чего вы не сможете ссылаться на свойства объекта Vue как на this.vueProperty из обратного вызова, нужно будет вручную создать их где-нибудь в области обратного вызова.

В приведенном ниже примере size является свойством data. В вычисляемом свойстве fitlerBySize нам нужно объявить size переменной, чтобы это значение можно было использовать в fitlerBySize filter:

Стрелочная функция использует this объект из окружающего контекста. В нашем случае это из вычисленного свойства filterBySize , связанного с объектом Vue, что упрощает обратный вызов filter:

Недостаток

Хотя стрелочные функции можно эффективно использовать во многих ситуациях, это не значит, что мы должны использовать их все время при разработке Vue. В самом деле, вы вообще не должны использовать стрелочные функции в качестве свойств функции в объекте конфигурации Vue, так как им нужен доступ к this контексту из конструктора Vue.

Одиночный параметр и неявный возврат

В определенных сценариях можно использовать синтаксис стрелочной функции даже в терминах. Если у вас есть только один параметр для вашей функции, можно сбросить скобки () . Если у вас есть только одно выражение в вашей функции, можно сбросить фигурные скобки {}!

Вот обратный вызов массива фильтра с этими сокращенными реализациями:

Подробнее о стрелочных функциях на MDN.

2. Литералы шаблонов

Литералы шаблонов для определения строки используют обратные элементы () вместо двойных или одинарных кавычек.

А также позволяют нам делать две супер-полезные вещи в Vue.js:

Многострочные строки (отлично подходят для шаблонов компонентов)

Встроенные выражения (отлично подходят для вычисляемых свойств)

Многострочные строки

Написанный шаблон в JavaScript-коде не будет идеальным, но мы этого всё же хотим. А что, если в шаблоне много контента? До ES2015 у нас было два варианта:

Первый вариант: поставить все в одну строку:

Очень трудно читать, когда строка становится длинной. Второй вариант: сделать его многострочным. Из-за того, как анализируются строки JavaScript, в конце нужно сломать строку и снова присоединить ее с помощью + . Это значительно упрощает редактирование шаблона:

Литералы шаблонов решают эту проблему, поскольку они допускают многострочные строки, не требуя разбиения:

Встроенные выражения

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

Используя обычные строки, мы должны разбить строку, чтобы вставить переменную и объединить ее с помощью + . Опять же, это упрощает чтение и редактирование строки:

Используя плэйсхолдер ${} в литерале шаблона, мы можем вставлять переменные и другие выражения, не нарушая строку:

Подробнее о литералах шаблонов на MDN.

3. Модули

Как загрузить объект JavaScript из одного файла в другой? Не было способа, пока не появился ES2015. Используя модули JavaScript, мы можем сделать это с помощью синтаксиса экспорта и импорта:

file1.js

file2.js

Модули имеют два основных преимущества:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Можно разбить приложение JavaScript на несколько файлов

Можно сделать определенный код повторно используемым в разных проектах

Компонентные модули

Одним из замечательных вариантов использования файлов модулей является компонент. До появления ES2015 нам нужно поместить все наши определения компонентов в основной файл, включая экземпляр Vue, например:

app.js

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

component1.js

Теперь мы можем импортировать объект определения компонента в основной файл:

app.js

Еще лучше вариант для модуляции компонентов — использование однофайловых компонентов. Они используют модули JavaScript, но также требуют инструмента построения, такого как Webpack. Обратитесь к этой статье за дополнительной информацией.

Деструктуризация и синтаксис spread

Объекты являются неотъемлемой частью разработки Vue.js. ES2015 упрощает работу с объектными свойствами с помощью некоторых новых синтаксических функций.

Назначение деструктуризации

Деструктуризация позволяет нам распаковать свойства объекта и назначить их отдельным переменным. Возьмите объект myObj . Чтобы присвоить свои свойства новым переменным, мы используем . обозначение:

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

Деструктуризация полезна в действиях Vuex. Действия получают объект context, который включает свойства объекта state и API метода commit:

Однако часто бывает, что свойство state в действии не нужно, и вы хотите использовать API commit. Используя назначение деструктуризации в профиле функции, можно создать параметр commit для использования в body, уменьшив многословие этой функции:

Синтаксис Spread

Синтаксис spread позволяет нам расширить объект в месте, где ожидаются несколько пар ключ / значение. Чтобы скопировать информацию с одного объекта на другой до 2015 года, нужно делать это следующим образом:

Используя оператор spread… , мы можем сделать это более кратко:

Повторяя пример с Vuex, мы часто хотим использовать свойства состояния Vuex в качестве вычисленных свойств. До появления ES2015 нам пришлось бы реплицировать каждый из них вручную. Например:

store.js

app.js

Vuex предоставляет функцию mapState, которая возвращает объект со всеми свойствами состояния Vuex, которые вы указали, предоставляя свои ключи:

Используя mapState в сочетании с оператором spread, мы можем комбинировать локальные вычислительные свойства с данными из Vuex очень коротко:

app.js

Это круто! Что ещё?

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

Promises. Они помогают с асинхронным программированием и могут использоваться вместе с компонентами Async, а также с действиями Vuex.

Object.assign . Это не то, что часто будет нужно, но это поможет понять, как работает реакционная система Vue. Vue.js 3.x, которая скорее всего, будет использовать новую функцию Proxies, поэтому проверьте на всякий случай!

Автор: Anthony Gore

Источник: https://vuejsdevelopers.com/

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree