Ретроспектива Vue 3

Содержание:

• Версия 3.1.0
• Версия 3.2.0
• Версия 3.3.0

Vue 3.1.0

Версия 3.1 вышла через 8 месяцев после релиза 3 версии. Посмотрим что было интересного.

Миграция Vue 2 с помощью @vue/compat

Для совместимости с Vue 2, нужно установить @vue/compat вместо vue-template-compiler.

Vue 3 больше не поддерживает IE 11

IE 11 перестал поддерживаться во Vue 3.1.

SFC online playground

Добавлена онлайн площадка SFC (playground) для отладки и теста одно файловых компонентов на vue. https://play.vuejs.org/

Experimental setup

Добавлен экспериментальный синтаксис setup, который значительно сокращает код. Пример, как было:

<script>
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    name: 'NavBar',

    setup() {
      const navbarCollapsed = ref(true);
      function toggleNavbar() {
        navbarCollapsed.value = !navbarCollapsed.value;
      }

      return { navbarCollapsed, toggleNavbar };
    }
  });
</script>

Пример, как стало:

<script setup>
  import { ref } from 'vue';
  const navbarCollapsed = ref(true);
  function toggleNavbar() {
    navbarCollapsed.value = !navbarCollapsed.value;
  }
</script>

CSS variable injection

Переменные в блоке стилях. Экспериментальная фича позволяющая добавлять переменные в блоке style. Пример:

<script setup>
  import { computed, ref } from 'vue'
  const size = ref(16);
  const fontSize = computed(() => `${size.value}px`);
</script>

<style>
  h3 {
    font-size: v-bind('fontSize')
  }
</style>

onServerPrefetch функция жизненного цикла

Для работы с SSR позволяет дождаться запроса с сервера, чтобы сделать рендер компонента. Можно вызывать несколько функций, исполнение будет параллельно. Аналогичен serverPrefetch из Vue 2.6. Пример:

<script>
  import { defineComponent, onServerPrefetch, ref } from 'vue';
  import { getArchiveUsers } from './users';
  export default defineComponent({
    name: 'Main',

    setup() {
      const archiveUsers = ref(0);
      onServerPrefetch(async () => {
        archiveUsers.value = await getArchiveUsers()
      })
      return { archiveUsers };
    }
  });
</script>

BigInt

С текущей версии можно использовать BitInt. Типизировать в props и напрямую в шаблоне, как в примере:

<template>
  <h2>{{ size + BigInt(16) }}</h2>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({
    props: {
      size: BigInt
    }
  })
</script>

Ecosystem updates

Получили обновления практически вся экосистема Vue:

• Router v4 работает стабильно уже несколько месяцев.
• Devtools ещё в стадии бета тестирования, но уже предлагает удобный инструмент для работы.
• Vue cli v4 поддерживает vue 3 и скоро появится v5
• Volar VSCode стал ещё лучше при использовании (проверка типов при компиляции и др)
• Vue Test Utils вот-вот станет доступной и выйдет из релиза-кандидата

TypeScript support

Началась поддержка TypeScript v4+. Можно теперь писать классный код на тайпскрипте! Пример:

import { RouterView } from 'vue-router'
declare module '@vue/runtime-core' {
  interface GlobalComponents {
    RouterView
  }
}

Vue 3.2.0

Релиз версии был 5 августа 2021.

New SFC Features

Экспериментальные фичи стали стабильными:

• <script setup> — сокращенный синтаксис;
• <style> v-bind — переменные в стилях.

Web Components

Создание нативных custom elements, пример:

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // Обычные опции компонента Vue
})

// Регистрация custom элемента
// После регистрации - все `<my-vue-element>` элементы
// будут обновлены.
customElements.define('my-vue-element', MyVueElement)

Этот API позволяет разработчикам создавать компоненты на базе Vue в любой платформе

Performance Improvements

Значительно увеличился перфоменс:

• ref стали читаться быстрее на 260% и записываться на 50%
• на 40% быстрее отслеживание зависимостей
• на 17% меньше используется оперативной памяти

Компилятор тоже получил улучшение в 200% на создание plain element VNodes и др. улучшения

Server-side Rendering

Пакет @vue/server-renderer включает сборку ES, которая стала отделена от Node.js. Это позволит использовать @vue/server-renderer в других средах.

Effect Scope API

Низкоуровневое улучшение для Computed и Watch для библиотек. Подробнее: https://vuejs.org/api/reactivity-advanced.html#effectscope

Vue 3.3.0

И основные новинки в релизе 3.3 «Rurouni Kenshin». В основном улучшения коснулись <script setup> и typescript.

Импорт типов для props

Ранее defineProps  и defineEmits не могли использовать импортируемые типы, теперь это устранили и можно сделать вот так:

<script setup lang="ts">
import type { Props } from './bar'

defineProps<Props & { extraProp?: string }>()
</script>

Использование дженериков для компонентов

Теперь в конструкции <script setup> могут приниматься параметры дженерика:

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

Более удобный defineEmits

Раньше синтаксис defineEmits был такой:

const emit = defineEmits<{
  (e: 'bar', id: number): void
  (e: 'foo', name: string, ...rest: any[]): void
}>()

Теперь существует более короткий вызов:

const emit = defineEmits<{
  bar: [id: number]
  foo: [name: string, ...rest: any[]]
}>()

Типизация слотов в defineSlots

defineSlots можно теперь использовать при объявлении ожидаемых слотов:

<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => any
  item?: (props: { id: string }) => any
}>()
</script>

Деструктуризация props

Экспериментальная фича — деструктуризация пропсов с сохранением реактивности:

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

const { msg = 'hello' } = defineProps(['msg'])

watchEffect(() => {
  console.log(`msg is: ${msg}`)
})
</script>

<template>{{ msg }}</template>

defineModel

Экспериментальная фича — уменьшить код при двустороннем связывании. Ранее пробрасываемый пропс надо было эмитом отправить обратно , сейчас возможно сделать так:

<script setup>
const modelValue = defineModel()
</script>

<template>
  <input v-model="modelValue" />
</template>

defineModel автоматически регистрирует пропс и возвращает ref.