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

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

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

Поддержка итерируемого протокола с v-for
Многокорневые шаблоны (фрагменты)
Реактивные ссылки
Обычай v-model модификаторы
Пакет для пользовательских рендереров

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

Примечание: эта статья изначально была опубликована здесь, в блоге разработчиков Vue.js 2018/09/17.

1. Поддержка итерируемого протокола с `v-for`

Что это?

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

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

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

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

Поскольку итерируемые объекты и типы данных теперь официально являются частью языка 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. Например, если у вас есть родительский элемент с дисплей: гибкийналичие оболочки между родительским и дочерним элементами не будет работать.

<template>
  <div style="display:flex">
    
    <FlexChildren/>
  </div>
</template>

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

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

Узнайте больше на GitHub.

3. Реактивные рефералы

Что это?

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

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

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

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

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

<template>
  <form-input @valid="updateValidEmail">
</template
<script>
export default {
  data() => ({
    emailValid: false  
  }),
  methods: {
    updateValidEmail(value) {
      this.emailValid = value;
    }
  }
}
</script>

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

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

<template>
  <form-input ref="email">
</template
<script>
export default {
  computed: {
    emailValid() {
      // Currently this won't work as $refs is not reactive
      this.$refs.email.isValid;
    }
  }
}
</script>

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

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

Узнайте больше на GitHub.

Пользовательские модификаторы 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", автоматически преобразует ввод в виде числа. Это полезно, потому что даже с type="number" на входе значение, возвращаемое элементами ввода HTML, всегда является строкой.

Этот запрос функции должен разрешить пользовательский v-model модификаторы, определяемые пользователями.

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

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

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

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

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

Узнайте больше на GitHub.

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

Что это?

В настоящее время средство визуализации 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.