Эта статья — перевод оригинальной статьи Evan You "Vue 3.2 Released!"
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Мы рады объявить о выпуске Vue.js 3.2 "Quintessential Quintuplets"! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.
Новые фичи SFC
Две новые функции для однофайловых компонентов (SFC, также известные как файлы .vue) вышли из экспериментального статуса и теперь считаются стабильными:
<script setup>- это синтаксический сахар, который значительно улучшает эргономику при использовании Composition API внутри SFC.<style> v-bindвключает динамические значения CSS, управляемые через состояния компонентов, в теге <style>.
Вот пример компонента, использующего эти две новые функции вместе:
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<template>
<button @click="color = color === 'red' ? 'green' : 'red'">
Color is: {{ color }}
</button>
</template>
<style scoped>
button {
color: v-bind(color);
}
</style>Попробуйте это на SFC Playground или прочтите соответствующую документацию:
Основываясь на <script setup> у нас также есть новый RFC для улучшения эргономики использования ref - пожалуйста, поделитесь своим мнением здесь.
Web Components
Vue 3.2 представляет новый метод defineCustomElement для простого создания собственных нативных веб компонентов с использованием API Vue компонентов:
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// поля обычного Vue компонента
})
// Зарегистрируйте свой компонент.
// После регистрации, все `<my-vue-element>` теги
// на на странице будут обновлены.
customElements.define('my-vue-element', MyVueElement)Этот API позволяет разработчикам создавать библиотеки компонентов на основе Vue, которые можно использовать с любым фреймворком или же вообще без него. Мы также добавили в нашу документацию новый раздел, посвященный использованию и созданию веб-компонентов в Vue.
Улучшения производительности
3.2 включает в себя значительные улучшения производительности реактивности Vue, благодаря отличной работе @basvanmeurs. А именно:
Компилятор шаблонов также получил ряд улучшений:
Наконец, есть новая директива v-memo, которая дает возможность мемоизировать часть дерева шаблона. Директива v-memo позволяет Vue пропустить не только различие виртуального DOM, но и вообще создание новых VNodes. Несмотря на то, что эта директива понадобится вам довольно редко, но она обеспечивает обработку некоторых случаев для достижения максимальной производительности в определенных сценариях, например, в больших списках v-for.
Использование v-memo, которое представляет собой небольшое дополнение, помещает Vue в число самых быстрых фреймворков в js-framework-benchmark:
Server-side Rendering
Пакет @vue/server-renderer в версии 3.2 теперь включает сборку ES модуля, который также отделен от встроенных модулей Node.js. Это позволяет объединять и использовать @vue/server-renderer в средах выполнения, отличных от Node.js, таких как CloudFlare Workers или Service Workers.
Мы также улучшили streaming render APIs, добавив новые методы рендеринга в Web Streams API. Ознакомьтесь с документацией @vue/server-renderer для получения более подробной информации.
Effect Scope API
3.2 представляет новый Effect Scope API для прямого управления временем удаления реактивных эффектов (computed и watchers). Это упрощает использование API реактивности Vue вне контекста компонента, а также открывает некоторые расширенные варианты использования внутри компонентов.
Это низкоуровневый API, в основном предназначенный для авторов библиотек, поэтому рекомендуется прочитать RFC, чтобы узнать о мотивации и сценариях использования этой функции.
Заключение
Подробный список всех изменений в 3.2 смотрите в списке всех изменений.
js_n00b
defineCustomElement — это конечно круто. Теперь Vue.js победит все остальные фреймворки.
kotboriska
А какие остальные? Ангуляр? У них просто разные задачи. У остальных использование чуть выше статистической погрешности. А Реакт - вообще не фреймворк.
MaZaAa
У них у всех одна задача — пользовательский интерфейс. Так что не надо наивно полагать что якобы под разные проекты подходит тот или другой инструмент, они все подходят под любые задачи из реальной жизни.
В этом его преимущество, ибо добавляешь к нему Typescript и MobX и он сразу превращается в шикарный инструмент. А без этих 2х аспектов он убогий, спору нет.
kotboriska
У автомобиля, поезда и самолёта тоже одна задача: транспортировка людей и предметов. Но об их взаимозаменяемости зачастую вопрос не стоит.
Не, спорю, имея достаточно упорства, но недостаточно понимания, можно решить с помощью любого фронтенд фреймворка любые задачи пользовательского интерфейса, даже совершенно ему не свойственные. Вопрос в том, что фреймворк должен помогать разработчику достичь целей прилагая минимум усилий. Т.е. Реализовывать интерфейс (и всё, что с ним связано) нужно благодаря, а не вопреки фреймворку.
По поводу доработки напильником - так если ещё добавить несколько библиотек уровня RxJs и выкинуть уродский синтаксис - то и ангуляр получится xD
У Реакта есть только одно преимущество - порог входа: он написан РНРшниками для РНРшников. В остальном в сравнении с Vue полная безнадёга и упадок.
MaZaAa
Это уже не правильная аналогия. Это аналогия из разрядка интерфейс операционной системы, мобильный ОС, браузерной версии, мобильной версии.
React + MobX решает любые задачи UI.
Получится вырви глаз лапше код и непригодная для дальнейшего развития/поддержки кодовая база.
JSX великолепен
Голый react да, но его голым или +redux используют только недалекие. Он пригоден только в связке с MobX'ом, а тут уже это небо и земля.
kotboriska
Это получится при использовании любых инструментов, если руки растут оттуда, откуда ноги должны.
Если человек не умеет ни во что кроме паттерна Flux и поделок мордокниги - это его проблемы. Кто слаще морковки ничего не ел и сложнее React'a ничего не осилил - ССЗБ.
Отмечу, что даже этот паттерн во Vue реализован на голову удобнее, чем в православном Redux-e. За MobX не знаю - говорить не буду. В целом не фанат данного паттерна, но думаю этот холивар тут не уместен.
Angular или Vue решает те же задачи без MobX xD
Да-да, а CSS-in-JS прекрасен! (нет)
Его используют по разным причинам, но выбирают как базовую библиотеку, как правило, недалёкие. Аргументы про процент использования из области "миллионы мух не могут ошибаться". Непродуманная архитектура еще долго будет вылезать боком. Хоть к 17 версии основные поводы для фейспалма закостылили, это всё в целом напоминает превозмогание собственноручно созданных трудностей.
markelov69
Поэтому у вас такие суждения, MobX делает из React'a вообще абсолютно другой инструмент, управление состоянием становиться эталонным. React это только лишь view слой и ничего больше.
kotboriska
Заинтриговали... Глянул. Таки, да! С богомерзким Redux никакого сравнения. На первый взгляд даже может тягаться по удобству использования с Vuex'ом. Декораторы напомнили Angular>1, аж прослезился...
Но с появлением хуков, как мне кажется, все эти глобальные хранилища стали излишними. Функциональные компоненты и хуки способны решить большинство задач из коробки.
markelov69
С помощью MobX это решается намного быстрее, проще, приятнее, гибче и красивее, про оптимизацию производительности из коробки я вообще молчу)
c_kotik
Да, да, ещё эпоха "похорон пхп" никак не завершится, а тут убийца JS-Фреймворков нарисовался. Никогда такого не было и вот опять!
js_n00b
Я не говорил, что он "убьет" всех других. Не надо передёргивать. Просто выйдет на первое место по использованию.
Представьте, что теперь библиотеки компонентов можно писать на Vue, а использовать везде. Естественно, выгоднее писать их сразу для всех фреймворков и библиотек, используя эту фичу.
eshimischi
На первое место он не выйдет, по известной причине.. "прохайпенный" Реакт врядли уйдет в тень и сообщество до сих пор гораздо больше чем у всех остальных
js_n00b
Конечно не уйдет, но это пошатнет его позиции. Чтобы удержаться, ему нужно внедрять подобные штуки раньше всех.
eshimischi
Фанаты Реакта тут поспорят, я кстати категорически не фанат этой библиотеки, никогда не был и не стану.
js_n00b
Конечно можно поспорить. Но интересно, что раньше Реакт был законодателем мод, и Вью равнялся на него, внедряя похожие фичи. Сейчас же Вью первый начинает применять новые возможности браузеров, такие как css-переменные и веб-компоненты.
eshimischi
Про css - переменные не согласен, это давно уже реализовано в CSS-to-JS библиотеках, например styled-components и применяется в Реакт. Про веб-компоненты, я какое то время наблюдал за Lit библиотекой, она появилась задолго до Vue 3 и изначально была создана для веб-компонентов, то есть идея сама по себе вообще не нова.
js_n00b
Насколько я знаю styled-components не использует CSS переменные, а генерирует классы на основе props. Для разработчика это выглядит похоже, но под капотом совсем другая механика.
eshimischi
Я привел styled-components как пример (Using Css Variables with Styled Components), есть еще emotion и много других CSS-to-JS библиотек с возможностью использования css vars. Я к тому, что это не про Vue/React как таковые..
js_n00b
Значит я рано радуюсь) в любом случае, эта обнова как раз то, что мне нужно в решении моей проблемы, над которой я работаю.
eshimischi
Дак вот так и надо было начинать статью ^_^ - это главное! Удачи!
js_n00b
Я вот поигрался со обновой и мне очень понравилась реализация css-переменных. Они записываются в inline-стиле элемента (вроде даже если стиль не scoped) хотелось бы иметь возможность делать темы со списком переменных и расшаривать их для всего приложения. Надеюсь эту возможностьсделают в будущем
eshimischi
Да пожалуйста, они ведь знают, что делают.. Меня больше впечатлил вот этот Pull Request #2345 . Занимаюсь глубоким погружением в изучение TS сейчас и работа инженеров по оптимизации кода TS и тд - всегда впечатляют, снимаю шляпу..
js_n00b
Круто!
justboris
Использовать веб-компоненты как общую базу для всех фреймворков – это очень утопичная идея, в реальности не работает. Вместо использования всех возможностей Vue, вам придется искать общий знаменатель и бороться с причудами как других фреймворков, так и самих веб-компонентов. Пару лет назад я об этом написал цикл статей с детальным разбором: часть 1, часть 2 и еще один перевод на эту же тему.
c_kotik
Да не решит это весь ворох задач и требований, предъявляемых заказчиками в разной стадии упоротости и фанатизма. Никогда никаких серебряных пуль в мире фронта не было и не будет. Так что пока Vue сообщество будет рвать на элементы реакт и прочие, выйдет очередной новый фреймворк и разработчики получат очередное "свежее дыхание", пока не приестся. Вон недавно за свелт хайпили. И пока поутихли.