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

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

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

1. Поддержка итерируемого протокола с v-for
2. Многокорневые шаблоны (фрагменты)
3. Реактивные ссылки
4. Пользовательские v-modelмодификаторы
5. Пакет для пользовательских рендеров

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

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

Что это?

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

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

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

Почему пользователи хотят это?

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

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

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

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

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

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

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

Что это?

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

<template>
  <div/>
</template>

<template>
  <div/>
  <div/>
</template>

<template>
  <div><!--Need to add this wrapper-->
    <child1/>
    <child2/>
    ...
  </div>
</template>

<template>
  <div style="display:flex">
    <!--This pattern won't work because of the wrapper:/-->
    <FlexChildren/>
  </div>
</template>

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

<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>

<input v-model="message"/>
<!--Message automatically updates as the input is used-->
<p>Message is: {{ message }}</p>
<script>
new Vue({
  data: {
    message: null
  }  
});
</script>

Vue.use(NonWebRenderer);

new Vue({
  render(h) => h('non-web-element', { text: 'Hello World' });
});