Рад приветствовать вас снова, друзья-энтузиасты Vue.js! Сегодня мы продолжим наш увлекательный экскурс по новейшим фичам и улучшениям, которые ожидают нас в Vue 3!

В нашей предыдущей статье "Миграция с Vue 2 на Vue 3: Устаревшие и Обновленные Фичи" мы рассмотрели основные обновления и изменения в Vue 3, которые послужили основой для плавного перехода с Vue 2 на Vue 3.

В этой статье мы сделаем следующий шаг — погрузимся с головой в захватывающий мир новых возможностей Vue 3!

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

Без лишних отлагательства приступим к делу!

Composition API

Первая в нашем обзоре и наиболее интересная фича — это Composition API.

Согласно документации Vue.js, Composition API — это набор API, который позволяет нам создавать компоненты Vue, используя импортированные функции вместо объявления опций. Это сборная солянка, которая охватывает следующие API:

• Reactivity API, например, ref() и reactive(), позволяющие напрямую создавать реактивное состояние (reactive state), вычисляемое состояние (computed state) и наблюдатели (watchers).

• Хуки жизненного цикла (Lifecycle Hooks), например, onMounted() и onUnmounted(), позволяющие программно подвязываться к жизненному циклу компонента.

• Внедрение зависимостей (Dependency Injection), т.е. provide() и inject(), которые позволяют нам использовать систему внедрения зависимостей Vue вместе с Reactivity API.

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

Вот как выглядел бы наш код в Options API:

<template>
  <div>
    <div>count: {{ count }} {{ isGreaterthanFive }}</div>
    <button @click="increase()">Increase Count</button>
    <input type="text" name="user" v-model="name" id="" />
    <div>{{ printUser }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: "",
    };
  },
  methods: {
    increase() {
      this.count++;
    },
  },
  computed: {
    isGreaterthanFive() {
      return this.count > 5 ? "Greater than 5" : "not Greater than 5";
    },
    printUser() {
      return this.name ? `Name is ${this.name}` : "Use Not Stated";
    },
  },
};
</script>

Теперь, с помощью Composition API тот же самый код можно разбить на небольшие фрагменты на основе логики, которую они выполняют, и это будет выглядеть примерно так:

<script setup>
import { ref, computed } from "vue";

// Логика подсчета
const count = ref("");
const increase = () => {
  count.value++;
};
const isGreaterthanFive = computed(() => {
  return count.value > 5 ? "Greater than 5" : "not Greater than 5";
});

// Логика именований
const name = ref("");
const printUser = computed(() => {
  return name.value ? `Name is ${name.value}` : "Use Not Stated";
});
</script>

<template>
  <div>
    <div>count: {{ count }} {{ isGreaterthanFive }}</div>
    <button @click="increase">Increase Count</button>
    <input type="text" name="user" v-model="name" id="" />
    <div>{{ printUser }}</div>
  </div>
</template>

Согласно официальной документации Vue, Composition API имеет много преимуществ по сравнению с API Options, среди которых:

• Больше повторного использования логики.

• Более гибкая организация кода.

• Улучшенный интерфейс типов, поскольку Vue 3 написан на языке Typescript.

• Меньший продакшн-бандл и меньшие накладные расходы.

Composition API — это, безусловно, огромный шаг вперед по сравнению с Options API, поскольку он дает нам возможность использовать возможности JavaScript в наших проектах Vue.js в полной мере. Правда, на освоение Composition API нужно будет потратить немного больше усилий, но оно того стоит. Ознакомьтесь с нашим курсом по Composition API Vue 3 — в нем вы найдете подробное руководство по использованию всего потенциала Composition API с примерами реальных юзкейсов.

Teleport

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

Идеальным примером использования телепорта являются модалки. Давайте вкратце рассмотрим один пример:

//AppModal.vue
<template>
  <Teleport to="body">
    <div>
      <div class="modal_content">
        </div>
        <div class="modal_title">
          <h2>This is my modal</h2>
        </div>
        <div class="modal_info">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores itaque
            inventore dignissimos suscipit delectus, ipsa repellat minima et vitae
            perspiciatis quasi unde earum corporis labore at in temporibus repudiandae
            totam
          </p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

//App.vue
<template>
 <div>
 <button @click="isOpen = true">Open Modal</button>
 <AppModal v-if="isOpen" />
 </div>
</template>

Посмотрим на результаты:

В нашем примере модальный компонент будет отображаться в теле как непосредственный дочерний компонент, даже если он расположен по-другому.

State Driven CSS

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

Например, если в переменную check установлено значение true, то нам нужно, чтобы div отображался красным, в противном случае — синим. Для таких случаев часто пишут код следующего вида:

<div :class="check === true ? 'red' : 'blue'">
    Hello World
</div>

В Vue 3 можно помещать реактивные переменные Vue непосредственно в CSS, что позволяет избежать создания дополнительных классов.

Давайте рассмотрим простой пример. Предположим, что в нашем шаблоне Vue имеется следующий скрипт:

<script setup>
import { ref } from 'vue'

const color = ref('#ff0000');

if(check == true) {
  color.value = '#0000ff';
}
</script>

<template>
        <input value="Hello World" />
</template>

Все предельно просто, не так ли? Если check равна true, то переменная color принимает значение '#0000ff'. В противном случае она будет установлена в '#ff0000'. В Vue 3 мы можем напрямую ссылаться на color прямо в CSS, используя v-bind:

<style>
  input {
    color: v-bind(color)
  }
</style>

Теперь color обновляется реактивно, и цвет ввода будет меняться на тот, который задан в переменной color. Это означает, что вы можете избежать неудобной логики в HTML-тегах и использовать JavaScript-переменные непосредственно в CSS, что, на мой взгляд, просто замечательно.

DefineEmits

defineEmits — это макрос в Vue.js Composition API, позволяющий объявить события, которые компонент может передавать своему родителю. Он указывается внутри в компоненте, и помогает сделать API компонента более наглядным и самодокументированным.

Давайте посмотрим на пример использования defineEmits:

<!-- MyComponent.vue -->
<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['my-event'])

function triggerEvent() {
  emit('my-event', 'payload')
}
</script>

В данном примере мы объявляем, что компонент может генерировать событие под названием my-event. Затем мы используем функцию emit, возвращаемую defineEmits, чтобы выдать это событие с полезной нагрузкой (payload) при вызове функции triggerEvent.

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

<script>
export default {
  // определяем как объект для проверки
  emits:{

    // или предоставляем функцию для проверки
    // возвращает истинные значения для валидных, ложные - для невалидных
    'check-name'(payload){
      return !!(typeof payload === 'string')
    }
  },
  data() {
    return {
        name:''
    }
  },
  methods: {
    sendData() {

      this.$emit('check-name', this.name)
    }
  }
}
</script>

Suspense

<Supense> — это встроенный компонент Vue.js для организации асинхронных зависимостей в дереве компонентов. Он позволяет отображать состояние загрузки в ожидании разрешения нескольких вложенных асинхронных зависимостей в дереве компонентов.

Это позволяет отображать состояния загрузки или ошибок верхнего уровня в ожидании разрешения вложенных зависимостей, таких как компоненты с асинхронным хуком setup() или асинхронные компоненты. 

<Supense> имеет два слота: #default и #fallback. Содержимое слота default показывается, если это возможно, а содержимое слота fallback показывается при ожидании разрешения асинхронных зависимостей.

Обратите внимание, что <Supense> является экспериментальной фичей, и ее API может измениться до того, как она достигнет стабильного состояния. Но Nuxt 3 использует <Supense>, и поэтому не стоит беспокоиться о том, что в ближайшее время она претерпит какие-либо изменения. Но тем не менее это потрясающая функция, так что давайте взглянем на нее в действии:

//PostComments.vue
<script setup>
import axios from 'axios'

const response = await axios.get('https://dummyjson.com/comments')
const comments =  await response.data.comments
</script>

<template>
    <div>
       <div>Comments</div>
       <ol>
       <li v-for="comment in comments" :key="comment">{{ comment.body }}</li></ol>
    </div>

</template>

//App.vue
<script setup>
import PostComments from './components/PostComments.vue';
</script>

<template>
  <Suspense>
    <template #default>
      <div style="display: flex"><PostComments /></div>
    </template>
    <template #fallback>
      <div>loading</div>
    </template>
  </Suspense>
</template>

С помощью приведенного выше кода наш компонент PostComments.vue получает из нашего API список комментариев. В ожидании ответа от API мы можем отображать наш индикатор загрузки с помощью <Supense> до тех пор, пока PostComments.vue не получит ответ.

Заключение

В заключение можно сказать, что переход от Vue 2 к Vue 3 стал для нас захватывающим событием, открывшим множество новых функций, которые по-новому раскрывают возможности веб-разработки.

Благодаря Composition API, Teleport, State driven CSS, Suspense и еще многим другим функциям, не упомянутым в этой статье, Vue 3 предоставляет нам множество инструментов для создания более быстрых, модульных и визуально динамичных приложений. Команда разработчиков Vue.js продолжает совершенствовать этот замечательный фреймворк, добавляя в него новые интересные фичи. Если вы все еще сидите на Vue.js 2, то самое время обновиться. Команда разработчиков Vue.js объявила, что поддержка Vue.js 2 прекратится к концу этого года (2023).

В заключение приглашаем всех желющих на открытый урок, на котором рассмотрим возможности библиотеки компонентов Quasar с Vue. Записаться можно на странице курса «Vue.js разработчик».