Vue 3.0 — первый взгляд

Наконец-то руки дошли попробовать новую версию Vue. Я не собираюсь быть объективным в этой статье, я просто расскажу свои впечатления в процессе работы с новой версией, а также расскажу как её установить и начать работу уже сейчас.

Несмотря на релиз, Vue 3.0 еще не готов для полноценного использования в продакшене. Router и Vuex еще не готовы для работы с новой версией, Vue CLI по умолчанию устанавливает старую версию, не говоря уже о сторонних плагинах и библиотеках, авторы которых не успели их обновить. Вот такой долгожданный и неполноценный релиз мы получили.

Особенно много вопросов вызывает новый синтаксис, так называемый Composition API, который, к счастью, не заменит полностью привычный и всеми любимый Options API. В пользу новой композиции нам всюду предлагают подобную картинку:

Смахивает на вкусовщину. Мне удобнее написать метод и забыть, что у него внутри, главное - чтобы его имя правильно подсказывало что он делает. Наверное, для стороннего человека будет проще понять скомпонованную логику, и любителям TS зайдет. Что мы точно знаем - это то, что оба подхода останутся навсегда. Так что знать новую компоновку надо. А некогда единое сообщество разделится надвое.

На вопросы "зачем это или другое нововведение" дают один ответ: потому что это есть в React. Такая аргументация не очень вдохновляет, если я хочу, чтобы было как в реакте, я буду писать на реакте.

Давайте перейдем к созданию проекта.

Для тех кто не разобрался с установкой Vue 3, добро пожаловать под спойлер:

npm install vue@next

npm install -g @vue/cli

yarn global add @vue/cli

vue -V

vue create hello-vue

cd hello-vue

code  .

Vue CLi заботливо создал для нас проект. Первое отличие сразу же бросается в глаза. Это файл main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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

Удаляем компонент HelloWorld.vue и все содержимое в файле App.vue.

В папке components создаем новый файл Card.vue со следующим содержимым:

<template>
  <div>
    <img :src="imgUrl" alt="cat pic" />
    <h1>{{ catName }}</h1>
    <p>
      <i>{{ text }}</i>
    </p>
    <p>
      <b>{{ website }}</b>
    </p>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    id: String,
    name: String,
    text: String,
    website: String,
  },
  computed: {
    imgUrl() {
      return `https://robohash.org/${this.id}?set=set4&size=180x180`;
    },
    catName() {
      return this.name.replace(/[_.-]/gi, " ");
    },
  },
};
</script>

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

<script>
import { computed } from "vue";
...

переписываем логику из computedв новую опцию setup вот так:

 setup(props) {
    const imgUrl = computed(
      () => `https://robohash.org/${props.id}?set=set4&size=180x180`
    );
    const catName = computed(() => props.name.replace(/[_.-]/g, " "));
    return {
      imgUrl,
      catName,
    };
  },

Setup принимает переменную props, которая содержит все входные параметры.

Картинки для карточек, нарисованных милых котиков, мы берем с сайта robohash.org. Просто чтобы разбавить наше скучное занятие. А еще добавим ультрамодного неоморфизма в стили:

<style scoped>
div {
  width: 400px;
  height: 380px;
  position: relative;
  background: #ecf0f3;
  margin-bottom: 30px;
  padding: 30px 5px;
  border-radius: 32px;
  text-align: center;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: semibold;
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
    6px 6px 10px rgba(0, 0, 0, 0.2);
  color: #6f6cde;
}
</style>

Теперь вернемся к файлу App.vue. Он должен принимать данные для карточек с котиками и создавать карточки. Напишем его сразу на новом синтаксисе:

<template>
  <div class="container">
    <Card
      v-for="cat in cats"
      :id="cat.id"
      :name="cat.username"
      :text="cat.company.catchPhrase"
      :key="cat.id"
      :website="cat.website"
    />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Card from "./components/Card";

export default {
  name: "App",
  components: { Card },
  setup() {
    const cats = ref([]);
    const fetchCats = async () => {
      cats.value = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      ).then((response) => response.json());
    };
    onMounted(fetchCats);
    return {
      cats,
    };
  },
};
</script>

<style>
body {
  background: #ecf0f3;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  padding: 30px 0px;
}
</style>

Если вы все сделали правильно, вот что вы должны увидеть в итоге:

Новыми для нас являются две фичи ref и onMounted

ref нужен нам, чтобы создавать реактивную переменную в методе setup(). Вот только пользоваться им немного по-другому. ref оборачивает наш массив в объект. Это нужно для двусторонней реактивности, ведь простые примитивы джаваскрипт передает как значение, а не как ссылки, в отличие от объектов. Теперь искомый массив доступен через переменную value этого объекта, и чтобы присвоить ему новое значение, придется писать вот так:

cats.value = data

А в шаблоне по прежнему используем просто cats

onMounted заменяет знакомый mounted. Как и все хуки жизненного цикла он будет доступен в setup под тем же именем, только с приставкой on. Для каждого метода придется вызывать onMounted заново. Напомню, что все эти манипуляции делались с одной целью, чтобы логику получения данных можно было написать вместе.

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

Полный код проекта доступен здесь.

Ну и небольшой вывод от меня. Создавать новые проекты и переводить старые(где это возможно) на новую версию фреймворка стоит. Несмотря на некоторые неоднозначные моменты, в ней есть и очевидные плюсы. Пользоваться новым синтаксисом или нет решать вам.