От автора: Vue славится простотой использования. Это достигается, отчасти благодаря наличию компактного API без слишком большого количества внешних функций.
Тем не менее, пользователи и специалисты поддержки всегда думают про потенциально полезные и новые для Vue js функции. В этой статье рассматриваются пять из наиболее востребованных функций с доски Vue на GitHub.
Поддержка итерабельного протокола с помощью v-for
Многокорневые шаблоны (фрагменты)
Реактивные refs
Пользовательские модификаторы 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 имеет ограничение — для шаблонов требуется один корневой узел. Это означает, что этот код действителен:
<template> <div/> </template>
А этот нет:
<template> <div/> <div/> </template>
Некоторые пользователи Vue запрашивают многокорневые шаблоны, особенно теперь, когда эта функция была добавлена в React.
Для чего пользователям это нужно?
Если вы хотите, чтобы ваш компонент отображал дочерние узлы для какого-либо родительского элемента, вам нужно добавить оболочку для соответствия ограничениям одного корня:
<template> <div><!--Нужно добавить эту оболочку--> <child1/> <child2/> ... </div> </template>
Наличие оболочки в структуре будет мешать требованиям определенных функций HTML или CSS. Например, если у вас есть родительский элемент с display: flex, наличие оболочки между родителем и дочерними элементами не позволит коду работать.
<template> <div style="display:flex"> <!--Этот родительский элемент не будет работать из-за оболочки:/--> <FlexChildren/> </div> </template>
Будет ли это добавлено?
По словам разработчиков, то, как работает алгоритм виртуального DOM, делает эту функцию сложной для реализации и потребует серьезной переработки. Таким образом, эта функция не входит в план развития. Подробнее на GitHub.
3. Реактивные refs
Важным аспектом дизайна компонентов Vue является то, что они должны быть изолированы и обмениваться свойствами и событиями. Однако иногда вам нужно, чтобы один компонент мог изменять состояние другого. Например, вам может потребоваться, чтобы компонент формы включал фокус дочернего компонента элемента ввода.
Решение состоит в том, чтобы использовать refs, которые дают компоненту доступ к модели данных другого компонента. Однако при доступе через refs модель данных компонента не реагирует, поэтому ее нельзя просматривать или включать в вычисляемое свойство. Реактивные refs позволят это сделать.
Для чего пользователям это нужно?
Компоненты обычно общаются через свойства и события и только между родительскими и дочерними компонентами. Чтобы родительский компонент отслеживал данные дочернего компонента, последний должен выпустить свои изменения состояния через события. Для этого требуется, чтобы у родителя была функция прослушивателя, обработчик и локальные данные для хранения отслеживаемого состояния.
Например, представьте компонент родительской формы, отслеживающий состояние «действителен» дочернего элемента ввода:
<template> <form-input @valid="updateValidEmail">
</template
<script>
export default { data() => ({ emailValid: false }), methods: { updateValidEmail(value) { this.emailValid = value; } }
}
</script>Этот код работает отлично. Единственная проблема заключается в том, что для каждого отдельного дочернего элемента ввода в форме требуется аналогичный уникальный код. Если форма имеет 10 или 100 полей, компонент формы станет раздутым.
Используя реактивные refs, родительский компонент не должен будет отслеживать дочерний и может просто наблюдать за его состоянием с вычисленным свойством.
<template> <form-input ref="email">
</template
<script>
export default { computed: { emailValid() { // В настоящее время это не работает, поскольку $refs не реактивны this.$refs.email.isValid; } }
}
</script>Будет ли это добавлено?
Хотя это очень востребованная функция, ее не планируют добавлять. Одна из проблем заключается в том, что эта функция нарушает дизайн компонентов. Refs предназначены только для последнего случая, когда интерфейс свойств / событий не может быть использован. Реактивность refs позволила бы использовать анти-шаблоны, в которых вместо событий использовались refs. Подробнее на GitHub.
4. Пользовательские модификаторы v-модели
Вы можете использовать директиву v-model для создания двусторонних привязок данных к элементам ввода форм:
<input v-model="message"/>
<!--Сообщение автоматически обновляется, так как используется элемент ввода-->
<p>Message is: {{ message }}</p>
<script>
new Vue({ data: { message: null } });
</script>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.use(NonWebRenderer); new Vue({ render(h) => h('non-web-element', { text: 'Hello World' });
});Будет ли это добавлено?
Да! Это станет частью более масштабного изменения, когда многие внутренние компоненты Vue будут разделены на отдельные пакеты с их собственными API-интерфейсами, что позволит использовать эту и другие виды пользовательских сборок Vue. Это изменение было добавлено в дорожную карту Vue.js и намечено для версии 3.x. Подробнее на GitHub.
Автор: Anthony Gore
Источник: https://vuejsdevelopers.com/
Редакция: Команда webformyself.