5 наиболее востребованных в 2018 году функций для Vue.js

5 наиболее востребованных в 2018 году функций для Vue.js

От автора: Vue славится простотой использования. Это достигается, отчасти благодаря наличию компактного API без слишком большого количества внешних функций.

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

Поддержка итерабельного протокола с помощью v-for

Многокорневые шаблоны (фрагменты)

Реактивные refs

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

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

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

Пользовательские модификаторы v-model

Пакет для пользовательских рендереров

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

1. Поддержка итерабельного протокола с помощью v-for

Когда вы думаете об итерации, вы, скорее всего, представляете массивы. ES2015 представил итерабельный протокол, который, когда он реализован, позволяет повторять итерацию любого объекта с помощью for…of. ES2015 также представил новые повторяющиеся типы данных, такие как Map и Set.

В настоящее время директива Vue v-for может выполнять итерацию массивов и простых объектов, но не других итерируемых объектов или типов данных. Если вы используете, например, Map и хотите перебрать его с помощью v-for, вам сначала придется преобразовать его в массив или простой объект.

Примечание. Map, Set и другие новые повторяющиеся типы данных также не являются реактивными.

Для чего пользователям это нужно?

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

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

Будут ли они добавлены?

Может быть. Проблема была закрыта на GitHub, так как разработчики не были убеждены, что итерируемые объекты и типы данных будут часто использоваться для состояния пользовательского интерфейса. Кроме того, для создания повторяющихся объектов и типов данных потребуется значительная доработка.

Тем не менее, система обозревателей Vue должна быть реорганизована в версии 2.x-next, что было бы идеальным моментом для реализации этой функции. Подробнее на GitHub.

2. Многокорневые шаблоны (фрагменты)

В настоящее время Vue имеет ограничение — для шаблонов требуется один корневой узел. Это означает, что этот код действителен:

А этот нет:

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

Для чего пользователям это нужно?

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

Наличие оболочки в структуре будет мешать требованиям определенных функций HTML или CSS. Например, если у вас есть родительский элемент с display: flex, наличие оболочки между родителем и дочерними элементами не позволит коду работать.

Будет ли это добавлено?

По словам разработчиков, то, как работает алгоритм виртуального DOM, делает эту функцию сложной для реализации и потребует серьезной переработки. Таким образом, эта функция не входит в план развития. Подробнее на GitHub.

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

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

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

3. Реактивные refs

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

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

Для чего пользователям это нужно?

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

Например, представьте компонент родительской формы, отслеживающий состояние «действителен» дочернего элемента ввода:

Этот код работает отлично. Единственная проблема заключается в том, что для каждого отдельного дочернего элемента ввода в форме требуется аналогичный уникальный код. Если форма имеет 10 или 100 полей, компонент формы станет раздутым.

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

Будет ли это добавлено?

Хотя это очень востребованная функция, ее не планируют добавлять. Одна из проблем заключается в том, что эта функция нарушает дизайн компонентов. Refs предназначены только для последнего случая, когда интерфейс свойств / событий не может быть использован. Реактивность refs позволила бы использовать анти-шаблоны, в которых вместо событий использовались refs. Подробнее на GitHub.

4. Пользовательские модификаторы v-модели

Вы можете использовать директиву v-model для создания двусторонних привязок данных к элементам ввода форм:

v-model — синтаксическая основа прослушивателей свойств и событий.

Для преобразования события доступно несколько модификаторов. Например, модификатор .number, используемый как v-model.number = «num», автоматически будет задавать тип элемента ввода, как number. Это полезно, потому что даже, если задать для элемента ввода type=»number», значение, возвращаемое из HTML, всегда является строкой.
Запрос функции заключается в разрешении пользовательских модификаторов v-model, определенных пользователями.

Для чего пользователям это нужно?

Предположим, вы хотите автоматически форматировать телефонный номер Таиланда, когда пользователь вводит его, например, «0623457654» будет преобразован в «+66 6 2345 7654». Вы можете написать собственный модификатор, скажем, .thaiphone, и использовать его для элемента ввода. Легко.

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

Будет ли это добавлено?

Вряд ли. Этот и связанные с ним вопросы были закрыты, разработчики рекомендуют обходные решения, упомянутые выше. Подробнее на GitHub.

5. Пакет для пользовательских рендереров

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

Для чего пользователям это нужно?

Vue теперь используется в не веб-средах, например, на мобильных устройствах через такие проекты, как NativeScript. Изоляция рендерера упростит возможность авторам библиотек заменять HTML-рендерер другим рендерером, подходящим для выбранной ими среды.

Будет ли это добавлено?

Да! Это станет частью более масштабного изменения, когда многие внутренние компоненты Vue будут разделены на отдельные пакеты с их собственными API-интерфейсами, что позволит использовать эту и другие виды пользовательских сборок Vue. Это изменение было добавлено в дорожную карту Vue.js и намечено для версии 3.x. Подробнее на GitHub.

Автор: 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