Vue 3: CompositionAPI + Typescript эксперименты

В прошлой статье меня упрекнули, что я при живом Vue 3 пишу про "устаревший" Vue 2. Отговорившись тем, что Vue 3 еще не production-ready, я понемногу начал его смотреть и изучать. И поскольку я заядлый любитель типизации и различных фичей с сахарком, то рассматривать Vue 3 с его новеньким CompositionAPI в статье именно с этой точки зрения. А заодно поэкспериментируем и попробуем написать свой типизированный store, организовать компоненты в стиле <script setup> и подружить его с typescript и eslint, а также напишем небольшой компонент на TSX в качестве еще одного эксперимента. Весь код приложения.

Что глобально нового во Vue 3?

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

Как Vue 3 поможет типизации?

CompositionAPI позволит уйти от привычного всем Vuex, который очень сложно нормально типизировать (в другой статье я попытался максимально легко и полноценно это сделать - и все равно остались серьезные проблемы). Большая часть трудностей касается логики actions Vuex - в разных модулях могут быть экшены с одинаковым названием, поэтому Vuex не может гарантировать тип возвращаемых значений из них. Основные библиотеки для типизации Vuex давно перешли на модульность - импортируете себе конкретный модуль и напрямую через его инстанс совершаете все манипуляции, без навешивания чего-либо на Vue прототип. Поэтому в этой статье попробуем написать замену Vuex.

Также во vue 3 можно уйти от class-components, которые сильно улучшали типизацию во vue 2, а все писать прямо в <script lang="ts" setup> и полностью типизировать состояние, методы, хуки и тп, новые возможности setup позволят типизировать сигнатуры Emit ивентов (правда, только со стороны "детей").

Какие проблемы остались?

Типизация в темплейтах - головная боль Vue, которой нет в не любимом мной реакте. Эта типизация касается как различных циклов и слотов, так и props, eventHandlers на кастомные компоненты, их типизация доступна только внутри компонентов-детей. Попробуем это решить с помощью TSX и новым setup'ом.

Создание проекта

Я использовал vite для создания проекта, дополнительные настройки - typescript (vite template vue-ts), в дополнение установил eslint с рекомендованными Vue пресетами, со следующим отключенный правилом, позже объясню его значимость:

'@typescript-eslint/no-unused-vars': 'off', // uses in new <script setup>

Вы можете использовать Vue 3 откуда угодно, важно лишь его наличие и typescript.

Хранилище данных (store)

Я давно хотел это сделать вместо Vuex встроить кастомное хранилище на новых Ref и Reactive апи. В ходе раздумий принял решение архитектурно сохранить вид "как Vuex", что означает соблюдение следующих принципов:

1. Модульность (куда же без нее)

2. Разбиение на те же составляющие для работы с данными

Каждый слой будет отвечать за те же действия, что и аналогичный в Vuex:

1. State - класс с статичными полями, каждое обернуто в соответствии с типом в Ref (для примитивов) или Reactive (для объектов, массивов и т.п.)

2. Mutations - класс, который напрямую взаимодействует со State, состояние меняется только с помощью мутаций, они также не доступны в открытом апи модуля (так как все манипуляции со стором должны идти через actions)

3. Actions - бизнес логика модулей, под собой вызывает мутации

4. Getters - получение данных из состояния с необходимыми изменениями и кэшированием (например - отфильтрованный массив элементов, но если нужен просто сам массив целиком - читайте его сразу из стейта)

Мои мысли касались идеи по упрощению логики взаимодействия со стором - убрать мутации и изменять состояние откуда угодно, но я подумал, что это отказ от принципов Vue разделения слоев данных и отодвинул эту идею. Стоит отметить, что это касается именно хранилища данных, если вы будете делать аналоги миксинов для двух соседних компонентов (уже не в сторе) - меняйте данные согласно другим принципам (зачастую - как вы хотите), но я считаю, что в сторе стоит соблюдать некоторую разграниченность зон ответственности разных архитектурных частей.

/**
 * @file src/store/index.ts
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview Entry point of store
 */

import habrModule from './modules/habrModule'

export { habrModule }

/**
 * @file src/store/modules/habrModule/index.ts
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview Entry of store module
 */

import state from './state'
import getters from './getters'
import actions from './actions'

export default {
    state,
    getters,
    actions
}

/**
 * @file src/store/modules/habrModule/state.ts
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview State for store example with new Ref and Reactive Vue3
 */

import { ref, reactive } from 'vue'

export default class State {
  /**
   * Example string ref (reactive)
   */
  static strExample = ref('string example')

  /**
   * Example number ref (reactive)
   */
  static numberExample = ref(0)

  /**
   * Example string reactive
   */
  static objExample = reactive({
    property: 'property string',
  })
}

/**
 * @file src/store/modules/habrModule/mutations.ts
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview Mutations for store example with new Ref and Reactive Vue3
 */

import State from './state'

export default class Mutations {
  /**
   * Set to state new string
   * @param value 
   */
  static setString (value: string): void {
    State.strExample.value = value
  }

  /**
   * Increate the number in state
   */
  static increaseNumber (): void {
    State.numberExample.value++
  }
}

/**
 * @file src/store/modules/habrModule/getters.ts
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview Getters for store example with new Ref and Reactive Vue3
 */

import type { Ref } from 'vue'
import State from './state'

export default class Getters {
  /**
   * Test getter with cache
   * @deprecated must use readonly and state proxy if not need any business logic
   */
  static get strExample(): Ref<string> {
    return State.strExample
  }
}

Компонент в новом синтаксисе setup

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

<script>
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}
</script>

Но недавно я открыл для себя возможность другого, более "сахарного" приема для этой функции:

<script setup>
// all from SETUP here
</script>

Что это дает? Упрощение и этим все сказано! В сочетании с новым Composition API это позволит дробить компоненты до условной бесконечности, ну и писать немножко проще. Для экспериментов над Vue 3 я выбрал его как основной стиль написания компонентов, но в дополнение ниже я приведу пример компонента на TSX.

Что из минусов? К сожалению, редакторы кода (а заодно и eslint) не видят использования переменных из этого скрипта в темплейте - это может привести к действительно не используемым переменным. Также нужно быть осторожными с формированием таких компонентов. Vue не декларирует как вы должны их писать, поэтому важно договориться в команде/проекте об особенностях данного стиля написания. А еще это экспериментальная фича, и надо помнить об этом (как и сказано выше - рубрика - эксперименты!)

Ниже можете увидеть мои мысли в реализации примера, но я сделал это из собственной головы, если вы придумаете другую реализацию (например, некоторые объявляют состояние компонента единым объектом, как во Vue 2 и оборачивает его в Reactive - это тоже жизнеспособный подход, возможно даже лучше моего), не поленитесь рассказать о ней в комментариях, пожалуйста!

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

<template>
  <div>
    <!-- Main body -->
    <div class="main">
      <h5>App.vue</h5>

      String from store: {{ readonlyStringFromStore }}

      <div>
        <button @click="increaseCounter">Counter: {{ counter }}</button>
      </div>
    </div>
    <!-- /Main body -->

    <TheHelloWorldComponent :counter="counter" @customEvent="increaseCounter" />

    <TheTestComponent :counter="counter" @click="increaseCounter" />
  </div>
</template>

<script lang="ts" setup>
/**
 * @file src/App.vue
 * @author Artem Shuvaev
 * @version 1.0.0
 * @fileoverview Entry Vue example file for it's project
 */

import { ref, onMounted, readonly, defineAsyncComponent } from 'vue'
import { habrModule } from './store'

/* Components */

// Vue + new setup script example component
const TheHelloWorldComponent = defineAsyncComponent(
  () => import('./components/TheHelloWorldComponent.vue')
)

// Vue + new setup and TSX render example
const TheTestComponent = defineAsyncComponent(
  () => import('./components/TheTestComponent/index')
)

/* Data */

// must be readonly cause of state proxying
const readonlyStringFromStore = readonly(habrModule.state.strExample)

// simple reactive variable
const counter = ref(0)

/* Hooks */
onMounted(() => {
  habrModule.actions.setString('changed from App.vue string')
})

/* Methods */

/**
 * Increase local reactive counter
 */
const increaseCounter = () => {
  counter.value++
}
</script>¬

<style lang="css">
@import 'styles.css';
</style>

<style lang="css" scoped>
.main {
  background-color: aquamarine;
  padding: 5vh;
}
</style>

Взаимодействие детей с родителями

Выше приведен пример компонента-родителя, внутри которого есть пара детей, для примера (поскольку в интернете еще не так много документации об этой особенности) я приведу полноценный компонент с использованием props, имитирующий события в родителя и взаимодействующий с хранилищем данных.

Из новых особенностей тут - можно типизировать emit полноценно, вместе с полезной нагрузкой, лучше чем при использовании class-components во Vue 2.

<template>
  <div class="hello">
    <h5>TheHelloWorldComponent</h5>

    Now counter is {{ props.counter }}
    <div>
      <button @click="emitCustomEvent">
        Emit custom event (increase counter)
      </button>
      <button @click="changeString">Change string in store</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * @file /src/components/TheHelloWorldComponent.vue
 * @fileoverview Child component example with using new setup, emits, store etc
 * @author Artem Shuvaev
 * @version 1.0.0
 */

import { defineEmit, defineProps } from 'vue'
import { habrModule } from '../store'

/* Props */
const props = defineProps({
  counter: {
    type: Number,
    required: true,
  },
})

/* Emits */

// Define emits signatures, 
// I don't know but signatures works only with null as output type (instead VOID or UNDEFINED)
const emit = defineEmit({
  customEvent: null,
  customEvent2: (payload: { test: string }) => null,
})

/* Methods */

/**
 * Call dispatch of store module
 */
const changeString = () =>
  habrModule.actions.setString('changed from HelloWorld.vue')

/**
 * @emits customEvent
 */
const emitCustomEvent = () => emit('customEvent')

// it's typed payload!
const emitCustomEvent2 = () =>
  emit('customEvent2', {
    test: 'string',
  })
</script>

<style lang="css" scoped>
.hello {
  background-color: lightsteelblue;
  padding: 5vh;
  margin-top: 5vh;
}
</style>

Закуска - TSX компонент

Да, я люблю типизацию, а что мешает полноценной типизации во Vue? Правильно - template, это красивая и очень удобная нотация написания компонентов as html, но я хочу туда подсветку, ошибки не в консоли браузера, а в редакторе кода. Есть ли решение? Да, пойти к React и попросить оттуда tsx. Работает ли это во Vue 3? Да, и еще лучше чем во втором! Работает ли это с сахарным сетапом, как выше? Нет, но возможно я неправильно его готовил, если подскажите в комментариях - буду очень благодарен.

Из воды выше - писать необходимо "как обычно", через defineComponent, но в setup нужно возвращать не переменные, которые будут использоваться в темплейте, а сам темплейт в стиле tsx. И вот что у меня получилось.

/**
 * @file /src/components/TheTestComponents/index.tsx
 * @fileoverview Test component with using TSX rendering in setup function
 * @author Artem Shuvaev
 * @version 1.0.0
 */

import { defineComponent } from 'vue'
import styles from './styles.module.css'

export default defineComponent({
  name: 'TheTestComponent',
  props: {
    counter: {
      type: Number,
      default: 0,
    },
  },
  emits: {
    click: null,
  },
  setup(props, { emit }) {
    /** Methods */

    /**
     * Simple click handler
     * @emits click
     */
    const onClickHandler = () => emit('click')

    /** Rendering */
    return () => (
      <div class={styles.test}>
        <h5>TheTestComponent</h5>
        <div>Now counter is: {props.counter}</div>
        <button onClick={onClickHandler}>Emit click (increase counter)</button>
      </div>
    )
  },
})

Это уже стабильно и полностью поддерживается => практически готово к продакшену (в ногу с самим Vue 3). Удобно ли это? С точки зрения типизации - абсолютный рай по сравнению с template. По-vue'шному ли это? Не особенно, но чего не сделаешь ради 100% автоподсказок в коде.

Заключение

Я перечитал весь текст выше много раз, но морали в нем нет и не будет. Я изучал и экспериментировал над новой версией своего любимого фреймворка и буду продолжать это интересное занятие, чего и вам советую. Но надеюсь, что мои эксперименты кому-то помогут! Код приложения.

Нравится ли мне Vue 3? Конечно, это ускорение, новые возможности реактивности и многое другое. Что вызывает сомнения - много вариаций написания приложений, как будто это React, а ведь именно от этой парадигмы "каждое приложение - уникально" Vue и пытался отойти при создании, рекомендуя использовать только экосистемные библиотеки и реализации (роутер, стор и тому подобное). Это своего рода строгий Golang во фронтенде, его код, написанной в далекой и жаркой Индии в соответствии со стайл-гайдами и линтерами будет понятен каждому стартаперу в Долине, а экосистема имеет в себе все необходимое и одинакова для всех, не нужно выбирать - просто пишите код! И я боюсь, что с новым релизом мы отдалимся от этого. Плохо ли это - покажет время и путь развития, который предложат нам создатели фреймворка.

А вам нравится Vue 3? Планируете скорый переход на него в проде, или еще годик пусть поварится в домашнем проекте?

P.S.

Если что - извиняюсь за код в статье, я не придумал, как его оформить красивее, а эти различия в отображениях синтаксиса меня добили, а заодно за материал и его подачу, получилось сумбурно, но я надеюсь интересующимся будет полезно.
Объясните мне, почему код на хабре имеет разную подсветку при написании, в черновиках и после публикации? Это фишка нового редактора или я что-то не понимаю? Причем кардинальные различия. Я понимаю, что я скармливаю не JS, а полноценный Vue файл, но различия в парсинге ключевых слов и комментариев, в редакторе новый и модный, а в самих публикациях старый и глупенький парсер?

Скрины