Ретроспектива Vue 3
В этом тексте вспомним, что было выходило нового во Vue 3 при минорных обновлениях.
В этом тексте вспомним, что было выходило нового во Vue 3 при минорных обновлениях.
Содержание:
Версия 3.1 вышла через 8 месяцев после релиза 3 версии. Посмотрим что было интересного.
Для совместимости с Vue 2, нужно установить @vue/compat вместо vue-template-compiler.
IE 11 перестал поддерживаться во Vue 3.1.
Добавлена онлайн площадка SFC (playground) для отладки и теста одно файловых компонентов на vue. https://play.vuejs.org/
Добавлен экспериментальный синтаксис 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>
Переменные в блоке стилях. Экспериментальная фича позволяющая добавлять переменные в блоке 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>
Для работы с 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>
С текущей версии можно использовать BitInt. Типизировать в props и напрямую в шаблоне, как в примере:
<template>
<h2>{{ size + BigInt(16) }}</h2>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
size: BigInt
}
})
</script>
Получили обновления практически вся экосистема Vue:
Началась поддержка TypeScript v4+. Можно теперь писать классный код на тайпскрипте! Пример:
import { RouterView } from 'vue-router'
declare module '@vue/runtime-core' {
interface GlobalComponents {
RouterView
}
}
Релиз версии был 5 августа 2021.
Экспериментальные фичи стали стабильными:
Создание нативных custom elements, пример:
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// Обычные опции компонента Vue
})
// Регистрация custom элемента
// После регистрации - все `<my-vue-element>` элементы
// будут обновлены.
customElements.define('my-vue-element', MyVueElement)
Этот API позволяет разработчикам создавать компоненты на базе Vue в любой платформе
Значительно увеличился перфоменс:
Компилятор тоже получил улучшение в 200% на создание plain element VNodes и др. улучшения
Пакет @vue/server-renderer включает сборку ES, которая стала отделена от Node.js. Это позволит использовать @vue/server-renderer в других средах.
Низкоуровневое улучшение для Computed и Watch для библиотек. Подробнее: https://vuejs.org/api/reactivity-advanced.html#effectscope
И основные новинки в релизе 3.3 «Rurouni Kenshin». В основном улучшения коснулись <script setup> и typescript.
Ранее 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 был такой:
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 можно теперь использовать при объявлении ожидаемых слотов:
<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>
Экспериментальная фича — уменьшить код при двустороннем связывании. Ранее пробрасываемый пропс надо было эмитом отправить обратно , сейчас возможно сделать так:
<script setup>
const modelValue = defineModel()
</script>
<template>
<input v-model="modelValue" />
</template>
defineModel автоматически регистрирует пропс и возвращает ref.
Цикл поддержки Vue 2 закончится 31 декабря 2023 года, рассказали в блоге Vue. Эта версия перестанет получать новые функции, исправления ошибок и обновления. В официальных каналах распространения прежняя версия останется.
Abell — это низкоуровневый, гибкий, независящий от фреймворка, Vite-генератор статических сайтов для быстрого создания сайтов с нулевым уровнем использования JS по умолчанию.
TS теперь включает одну опцию для определенного редактора, прежде он добавлял модификатор типа, полагаясь на настройки разработчика
Очередной js фрейморк, разработчики с опытом AI чаще планируют сменить работу и фреймворк на пайтоне от гугл для прототипирования.