Vue 3 что нового

Чего можно ждать от Vue 3 и как готовиться к его скорому приходу?

Вокруг грядущего релиза Vue 3 поднято много шума. Это вызвало у меня желание помочь сообществу разработчиков подготовиться к выходу следующей версии данного популярного фреймворка. Надеюсь, мой рассказ поможет вам успешно встретить Vue 3 и ни о чём не беспокоиться.

Vue 3 что нового. hf3i9a yq4wzo2ps3ktmjvwow8u. Vue 3 что нового фото. Vue 3 что нового-hf3i9a yq4wzo2ps3ktmjvwow8u. картинка Vue 3 что нового. картинка hf3i9a yq4wzo2ps3ktmjvwow8u

Vue 3 обещает быть просто замечательным фреймворком

Популярность Vue растёт, проект, с каждым обновлением, становится быстрее и лучше. Эван Ю сообщил о новой версии Vue 15 ноября 2018 года на конференции в Лондоне. Основное внимание во Vue 3 уделяется улучшению следующих характеристик фреймворка: производительность, комфортность разработки нативных приложений, удобство использования.

Здесь, помимо прочих улучшений, имеется новый API Composition, нацеленный на создание компонентов. Этот API не вводит во Vue новые концепции. Он скорее открывает доступ к базовым возможностям фреймворка, вроде создания реактивного состояния и наблюдения за ним, вроде использования самостоятельных функций. Это крайне полезно для Vue-разработчиков всех уровней.

Проще говоря, команда Vue активно работает над улучшением многочисленных API фреймворка, стремясь к тому, чтобы Vue 3 был бы лучше Vue 2 по следующим направлениям:

Чего ждать от Vue 3?

Поговорим о новых возможностях Vue 3 и о полезных изменениях, внесённых в него разработчиками.

О дате релиза Vue 3

В настоящий момент (вторая половина августа) релиз Vue 3 запланирован на третий квартал 2020 года. То есть — он может состояться в любое время до 30 сентября сего года. Эта информация основана на официальном плане развития проекта.

Vue 3 что нового. image loader. Vue 3 что нового фото. Vue 3 что нового-image loader. картинка Vue 3 что нового. картинка image loader

Сведения о дате релиза Vue 3

▍Ожидание скорого релиза Vue: поводы для оптимизма

Вот несколько фактов, которые, как мне кажется, позволяют говорить о том, что Vue 3, и правда, зарелизится уже совсем скоро:

▍Ожидание скорого релиза Vue: поводы для пессимизма

Возможности Vue 3, которые можно опробовать уже сегодня

Подготовка к миграции с Vue 2 на Vue 3

Если ваш проект сравнительно мал, вы следуете рекомендациям RFC Vue и избегаете использования функционала, который будет признан устаревшим, то вы сможете достаточно быстро перейти с Vue 2 на Vue 3. Но, в любом случае, лучше всего начинать процесс миграции с чтения соответствующего руководства. Учитывайте только, что это руководство пока находится в состоянии бета-версии. Поэтому можно ожидать того, что после выхода Vue 3 в него внесут изменения.

Изучение Vue 3

Вопросы и ответы

▍Я хочу изучить Vue. С чего начинать: с Vue 2 или с Vue 3?

Если вы только начинаете изучать этот фреймворк, то рекомендуется сначала освоить Vue 2. Главная причина подобной рекомендации заключается в том, что выход Vue 3 не означает внесения во фреймворк фундаментальных изменений. Большая часть знаний о Vue 2 не устареет и при использовании Vue 3. В результате оказывается, что для того чтобы приступить к освоению Vue нет смысла ждать релиза Vue 3. Начинайте изучать Vue 2, а когда выйдет Vue 3 вы уже будете готовы к тому, чтобы изучить то новое, что принесёт с собой этот релиз фреймворка.

▍Что произойдёт с Vue 2.x после релиза Vue 3?

Выйдет ещё один минорный релиз Vue 2 (2.7), который будет представлять собой бэкпорт совместимых возможностей Vue 3.x во Vue 2.x. Он, кроме того, будет выдавать предупреждения об использовании возможностей, признанных во Vue 3.x устаревшими. Это будет последний минорный LTS-релиз для Vue 2.x, который планируется поддерживать в течение 18 месяцев. Но важные обновления безопасности для него будут выпускаться и после окончания LTS-периода.

▍Я встречал критические замечания о Vue 3. Существуют ли во Vue 3 какие-то проблемы, о которых стоит знать?

На самом деле, в интернете (особенно — на Reddit) велось активное обсуждение Vue 3, в ходе которого были озвучены некоторые серьёзные опасения, которые были впоследствии признаны необоснованными. Среди этих опасений можно отметить, например, то, что новый API Composition нельзя будет просто добавить во фреймворк, и то, что текущий API Vue 2 будет признан устаревшим. Подобные слухи заставляли людей опасаться того, что всё то время, которое они вложили в изучение Vue, возможно, было потрачено зря. Но, опять же, для таких опасений больше нет никаких причин. Вы можете быть уверены в том, что API Composition — это дополнение к существующему API, а не его замена, и в том, что текущий API никуда не денется.

Итоги

Надеюсь, этот материал помог вам сформировать более чёткое, чем раньше, видение того, чего можно ожидать от Vue 3. Есть основания предполагать, что в скором времени можно ожидать новостей о Vue 3. Для того чтобы оставаться в курсе того, что происходит с этим фреймворком, подпишитесь на официальные новости проекта.

Как думаете, выйдет ли Vue 3 в ближайшее время?

Источник

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

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

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

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

Vue 3 что нового. e9214d526d724e6b598ca761945755ad. Vue 3 что нового фото. Vue 3 что нового-e9214d526d724e6b598ca761945755ad. картинка Vue 3 что нового. картинка e9214d526d724e6b598ca761945755adСравнение фрагментации кода в старом и новом синтаксисе

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

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

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

Второй вариант: для начала вам нужно обновить CLI. Снова открываем консоль :

Почему-то у меня не сработало обновление, тогда я обновил через yarn (да я иногда изменяю Vue с React):

Не знаю в чем была проблема, в случае чего, обновите через оба менеджера. Чтобы проверить версию, наберите в консоли:

должно показать @vue/cli 4.5.6.

Создаем проект в нужной нам директории:

Дальше нам предлагают три варианта на выбор. Выбираем вторую строку:

Default (Vue 3 Preview) ([Vue 3] babel, eslint)

После того как проект создался, переходим в директорию проекта:

Открываем проект в вашем любимом редакторе кода. Для VScode достаточно набрать в консоли:

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

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

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

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

Vue 3 что нового. ad5ce90e2c54a30502da28b81ff5da79. Vue 3 что нового фото. Vue 3 что нового-ad5ce90e2c54a30502da28b81ff5da79. картинка Vue 3 что нового. картинка ad5ce90e2c54a30502da28b81ff5da79

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

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

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

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

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

Источник

Опыт работы над проектом на базе Vue3 в 2021 году

Около полугода пришлось поработать над миграцией неработающего проекта на базе Vue 2 на проект Vue v.3.

Поскольку до сих пор работа с ним остаётся экзотикой, попробую описать состояние развития этого проекта в июле 2021 года, через 10 месяцев после релиза, и какие особенности встречались в этом не очень большом проекте в процессе миграции.

Будет интересно разработчикам и менеджерам, планирующим перевод проектов на Vue3, чтобы оценить трудоёмкость такого перехода. (TLDR — для перехода на Vue 3 сейчас многие фреймворки уже имеют свои версии с поддержкой Vue3. Сам переход особых трудностей не представляет, благодаря поддержке старого Options API и совместимости компонентов на разных API. Но вполне возможно, что время разработки увеличится за счёт ручной доработки отдельных компонентов, для которых авторы не написали версии поддержки. Какая-то значительная часть таких пакетов NPM имеется и останется, но нет проблем основываться на нативных версиях пакетов или написать части своего проекта по-другому, без использования старых пакетов. Активно поддерживаемые пакеты часто уже мигрировали и проблем не создают. Эту неопределённость каждого своего проекта необходимо вначале оценить и уметь писать компоненты.)

Кратко о проекте

Этот проект — типичный личный кабинет для пользователей с невысокой нагрузкой (до тысяч аккаунтов; одновременно работающих — не более сотен). Имеется множество настроек серверного движка, которым они управляют, и мини-проектов, которые они делают. Подробностей уточнять не будем, поскольку это бизнес и NDA. На фронтенд хватало одного разработчика, по бекенду взаимодействовал с небольшой группой. В перспективе, в проект понадобится встроить роль администратора (сейчас — роли «аноним» и «пользователь»), так как эти мини-проекты требуют модерации и обработки данных из БД, не только просмотр и правка таблиц — без фронтенд-админки не обойтись.

Особое внимание хочу уделить не проекту, а месту Vue 3 в экосистеме разработок среди других. Описать, что увиделось интересным и что удивляет.

Как выбирали движок

Был ранее созданный проект на основе Vue 2, но движок (на PHP) его к началу 2021 года потерял актуальность и было решено его переписать. В то же время, разработчики бекенда имели некоторое представление о Vue, поэтому вопрос о смене фреймворка не стоял — Vue был для всех удобнее.

Второй фактор, влиявший на выбор движка — отсутствие документации. Она не была нужна, поскольку ключевой разработчик (из совладельцев) знает проект и мог бы заново описать в процессе разработки бизнес-требования. В то же время, будет меньше вопросов, если код старого проекта использовался бы для создания нового. Поэтому из вариантов движка остаются Vue 2 или Vue 3.

Про Vue 2 — понятно, что разработчики обещают его поддержку 2 года после выхода 3-й версии. И рано или поздно переходить придётся. Или ваш проект уже станет неактуальным и через 3 года напишут новый? Эти вопросы было необходимо оценить.

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

В этом был некоторый вопрос — понятно, что лучше делать на Vue 3, но насколько много придётся переписывать и переделывать — было неизвестно. Надо было попробовать запустить страницы проекта и оценить объём доработок. В худшем случае пришлось бы много переписывать покомпонентно, в лучшем — большая часть проекта использовалась бы (в Options API), и вопрос стоял в совместимости по-разному написанных компонентов. Например, мультиязычная поддержка была уже на Composition API.

Через неделю миграции первая страница на подменённом движке уже начала работать, на Options, при этом i18n была на Composition, а позже и верификации на Composition были интегрированы с проектом. И ещё через неделю стало ясно, что 2-3 компонента (чекбоксы, радиокнопки, селекты) придётся дорабатывать. Потом добавился ColorPicker, за основу которого пришлось взять нативный NPM-пакет. Но многое можно было унаследовать от старого кода, сэкономив за счёт миграции, а не переписывания, по оценке, пару месяцев (важно, что документации вообще не было, сам код был документацией, и он непрерывно рефакторился в процессе разработки нового проекта).

Ещё момент несовместимости — сборщиком проекта был выбран Vite (на Rollup, написан специально под Vue3 разработчиками), и некоторые возможности, которые давал Webpack для некоторых пакетов (графики) не могли использоваться, хотя потом можно было бы разобраться. Сборщик Vue3 на Webpack есть (vue-loader-v16), но интересно было обойтись без него. В итоге, пакет с графиками работает, но не оптимизирован (это было не первоочерёдно).

Ещё, мы на раннем этапе рассматривали возможность перехода в будущем на фреймворк — Quasar, например, для облегчения мобильной разработки. Оказалось, что примерно в феврале много команд разработки пакетов уже работали над своими версиями для Vue3 и были в бета-стадиях. Quasar был среди них. Vuetify обещал сделать в течение 2021 года и пока сроки соблюдает, но у остальных стадии готовности — гораздо лучше.

Вообще-то, если смотреть планы в динамике, то у всех, включая головной проект Vue 3 — планы запаздывают и отодвигаются. Например, при релизе Vue3 обещали к концу года поместить этот проект на главную. До сих пор (июль 2021 года) на главной vuejs.org находится проект VueJS 2.x, а вверху — отсылка на страницу с Vue3: v3.vuejs.org. И помним, что и момент релиза 3-й версии Vue был передвинут примерно на год относительно начальных планов. Связано, как объясняли в своё время, в поддержке технологий «хуков» (тот самый Composition API), которые одновременно внедрились и развивались в React в то время.

Что ещё из интересных пакетов

В общем — жить и разрабатывать на Vue3 можно, и с каждым месяцем крепнут основания для этого утверждения.

Несомненно, будут старые интересные компоненты, которые не будут далее развиваться своими разработчиками. А новые не сразу и не всегда появятся. Придётся что-то сочинять, переписывать. Весь старый пакет обычно невыгодно переписывать, если вы не имеете планов его вести дальше. Потому что часто пакеты рассчитаны на множество настроек для разных случаев использования, а вам нужен один случай. Даже патч невыгоден из-за лишнего кода пакета, хотя возможен.

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

Источник

Vue 3. Что нового?

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

Какие новые функции и изменения представит Vue 3?

Composition API

Одним из самых больших изменений будет то, что API предложит новый основанный на функциях способ написания компонента. Это позволит повторно использовать логику для компонентов.

Нововведение изменит лишь то, как мы будем использовать Vue, но не помешает чему-либо в ваших уже созданных приложениях Vue 2.x. Новый API будет полностью совместим с текущим синтаксисом.

Больше крутых функций в Vue 3:

Переход из Vue 2

Как будет осуществляться миграция и что будет с Vue 2? Планируется один финальный релиз версии, куда будут бэкпортирование совместимые функции Vue 3 и добавлено предупреждения об устаревании для критических изменений.

Эта версия будет доступна как LTS в течение 18 месяцев, что означает, что она всё ещё будет получать обновления безопасности и её можно будет спокойно использовать дальше.

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

Можно ли использовать Vue 2 для нового проекта или подождать пока выйдет Vue 3?

Если вы решили использовать Vue для нового проекта, не теряйте время и начинайте с Vue 2. Тем не менее следите за изменениями и не используйте удалённые функции, а также сторонние библиотеки, которые скорее всего не будут обновлены в ближайшее время.

Если время терпит, тогда лучше дождаться конца второго квартала и начать разработку с Vue 3.

Могу ли я начать учить Vue сейчас или лучше дождаться Vue 3?

Если вы начинаете учить Vue с нуля, тогда вам вполне подойдёт Vue 2, так как большинство ключевых понятий остаются прежними, и ваши знания будут актуальными, даже когда выйдет v3.

Многие из изменений v3 являются внутренними, подобно тому, как они переписывают виртуальную реализацию DOM или пишут кодовую базу на TypeScript. Это сделает Vue быстрее, но вам не придётся использовать TypeScript, если вы этого не хотите.

Выводы

Пока Vue 3 выглядит как действительно хорошее решение. Более гибкое, быстрое и с лучшей структурой кода благодаря таким функциям, как Composition API и кодовой базе, написанной на TypeScript.

Нам остаётся только ознакомиться со всеми новыми функциями и дождаться официального релиза Vue 3!

Источник

Что нужно знать о Vue3 в 2020 году

VueJS является одним из самых популярных фреймворков для фронтенд разработки на данный момент. Это популярный фреймворк, популярность которого продолжает расти всё больше, о чём говорит график еженедельных скачивания в 2019 году.
Vue 3 что нового. stats1. Vue 3 что нового фото. Vue 3 что нового-stats1. картинка Vue 3 что нового. картинка stats1

И релиз Vue3 в начале 2020 года должен только увеличить его популярность.

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

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

Ниже приведены некоторые из самых значительных изменений, которые планируется внести, насколько можно верить словам основателя фреймворка, а также из RFC (запросы пользователей) репозитория Github.

Vue3 работает на основе Proxy-наблюдателей.
Реактивность лежит в основе фреймворка VueJS. Чтобы данные корректно отображались в представлении сразу же при их изменении, необходимо, чтобы кто-то, наблюдали за ними, следил за изменениями и обновлял все зависимые части.

Vue2 использует Object.definePropert для создания геттеров и сеттеров для реализации реактивности.

В чём польза использования Proxy наблюдателей за изнением данных?

Решение Vue3 заключает в себе использование прокси-наблюдателей для снятия функциональных ограничений с системы реактивности.

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

Применение новой системы значит, что реактивные свойства могут быть добавлены/удалены без использования vm.$set. Это также исправляет вопросы реактивности Vue2 при работе с массивами.

Как лучше всего подытожить автор Vue, благодаря архитектуре, основанной на Proxy, добились следующего:

В VueMastery приведена отличная демонстрация того, как добиться улучшений, с помощью Proxy.

Введение в Composition API

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

На данный момент, если вы работали в Vue, вы использовали то, что называется Options API. Options API организует код по свойствам: data, computed, methods и так далее.

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

Поддержка и читабельность кода стали основными проблемами.
Давайте посмотрим, как работает Composition API.

Пойдем по порядку и разберемся с тем, что здесь происходит.

API Vue Composition описывает множество основных функциональных возможностей Vue, таких, как реактивность и компонентные методы. Поэтому мы должны импортировать их.

Мы можем задавать реактивные данные, хуки жизненного цикла, вычисляемые свойства, определённые методы и возвращать всё, что захотим.

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

Когда это было впервые представлено, в сообществе Vue были тонны возмущений по этому поводу, потому что люди не хотели вынужденно переделывать и переосмысливать всю свою логику компонентов. Однако, впоследствии было решено, добавить эти изменения в качестве опциональных, и люди все ещё могут использовать Options API без каких-либо препятствий.

Если вы уже хотите начать практиковаться, вы можете использовать API Vue Composition в своих проектах.

Теперь вы можете использовать Suspense в Vue

Suspense будет полезен для:

При этом, это очень легко внедряется. Всё, что вам нужно будет сделать, это обернуть ваш код в Suspense компонент и определить ваше основное содержимое и содержимое заглушки.

Фрагменты в Vue3

Наш компонент, по задумке, должен возвращать несколько элементов

. Но в настоящее время компоненты Vue должны иметь один корневой элемент.

Шаблон компонента Columns может быть похож на этот, что вызовет некоторые проблемы с разметкой.

Вот здесь Фрагменты как раз очень к стати. Они позволяют возвращать несколько элементов, не ломая при этом разметку, что делает такие задачи супер простыми.

Шаблон компонента с использованием Fragment в Vue3 может выглядеть так.

И теперь, поскольку это вернет два элемента

, таблица будет валидной, и это будет итоговый, желанный результат.

Это именно то, что нам и было нужно. В настоящее время существует неофициальная библиотека Vue Fragment, которая использует внутренние директивы для того, чтобы получить все дочерние элементы компонента и переместить их в нужное место.

Ох. А ещё Portals

Порталы позволяют передавать содержимое между компонентами, и редактировать эти данные, даже, которые не принадлежат вашему текущему компоненту. Порталы позволяют рендерить DOM вне текущего компонента, в любом месте документа.

Это очень полезно, когда вы хотите отправить данные во всплывающее окно, боковую панель или что-то подобное.

Как и в случае с Fragments, в настоящее время существует неофициальная библиотека portal-vue, которая переносит эту функциональность на Vue2. В соответствии с репозиторием vue-next, Portals будет включен в Vue3.

Вот скриншот примера и код из документации portal-vue.
Vue 3 что нового. portal. Vue 3 что нового фото. Vue 3 что нового-portal. картинка Vue 3 что нового. картинка portal

В Vue3 проведена оптимизация рендеринга

Огромная часть Vue3 стала значительно быстрее и эффективнее. На самом деле, по информации из дискуссий создателя Vue.Js, внутренние тесты показали, что стили шаблонов в Vue3 стали компилироваться на

120% быстрее, чем в Vue2.

Были проведены две ключевые оптимизации, которые помогли улучшить скорость рендеринга Vue3:

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

Оптимизации блок-дерева

Использование виртуального DOM имеет естественное узкое место, потому что каждый компонент должен отслеживать свои зависимости.

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

Одна вещь, которую заметила команда Vue, заключается в том, что в компонентах большая часть структуры узла является статической. И если секция на самом деле была динамической (из-за директивы v-if или v-for), то большое количество содержимого внутри неё всё равно было статическим.
Vue 3 что нового. dynamic. Vue 3 что нового фото. Vue 3 что нового-dynamic. картинка Vue 3 что нового. картинка dynamic

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

Это значительно сокращает количество элементов, за которыми нужно следить в реактивном режиме.

Объединение всех этих узлов создаёт дерево блоков или шаблон, разделенный на блоки узлов на основе директив (v-if, v-for).

В дереве блоков каждый узел содержит:

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

Статический подъем деревьев

В то время как статический подъём деревьев не является чем-то новым (он существует в Vue 2.0), в Vue3 добавили гораздо более агрессивные методы для повышения скорости проекта. Как следует из названия, статический подъем деревьев не пересканирует статические элементы, которые не имеют никаких зависимостей. Вместо этого, он использует один и тот же элемент.

Это значительно сокращает работу виртуального DOM-а и экономит много накладных расходов проекта, в первую очередь на сборке мусора.

В Vue3 статический подъем является гораздо более агрессивным, для того, чтобы работать как можно эффективнее.

Поддержка Typescript

Еще одно изменение заключается в том, что ядро Vue будет переписано с помощью Typescript. Опять же, основной проблемой было то, что принуждение людей к изучению Typescript увеличит порог вхождения в работу на Vue.

Поэтому команда Vue предоставила выбор: если вам нужен Typescript, используйте его; если нет, придерживайтесь стандартного синтаксиса Javascript. Оба варианта работают просто отлично.
Vue 3 что нового. typescript. Vue 3 что нового фото. Vue 3 что нового-typescript. картинка Vue 3 что нового. картинка typescript

Кроме того, при работе в IDE, поддерживающих Typescript, в процессе разработки вам будет доступна более подробная информация о типах и более умное автодополнение.

По мне, так, тот факт, что Vue будет написан на Typescript, пойдет на пользу разработчикам, даже если они продолжат использовать стандартный Javascript.

Так как переписанное ядро Vue использует Typescript, то даже в процессе написания на синтаксисе Javascript будет доступно более полное автодополнение, детальный вывод информации и, в конечном счете, документация прямо внутри вашей IDE. Это поможет избежать большого количества просмотров документации по Vue.

Vue стал суперлегким

В настоящее время VueJS уже достаточно легкий (20 кб gzip). Но команда Vue столкнулась с проблемой: внедрение новых возможностей увеличило размер пакета для каждого пользователя, независимо от того, включает ли он их или нет.

Чтобы исправить это, Vue3 будет намного более модульным. В то время как это увеличивает количество импортов, которые вам понадобятся делать для разработки, однако, это гарантирует, что вы не будете тянуть неиспользуемые библиотеки в ваш проект.

Благодаря исключению нежизнеспособного кода, и модульному структурированию, оценочный размер для Vue 3.0 составляет примерно 10 kb gzip. Конечно, многие библиотеки будут импортированы заново, но это здорово, что мы не вынуждены тянуть их все из коробки.

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

Некоторые ресурсы для изучения Vue3

Ты готов.

Если у вас есть какой-либо опыт разработки Vue, то ясно, что обновления, которые появятся в Vue3, сделают его более удобным в использовании и более мощным.

От оптимизации рендеринга до помощи разработчикам в написании более читаемого/поддерживаемого кода, Vue3, кажется, улучшит многие болевые точки, испытываемые в Vue2.
Надеюсь, что эта статья хорошо объяснила что нового в Vue3 и то, как новые функции работают.

Если вы сюда пришли, чтобы узнать, когда Vue3 выйдет, то дата выхода Vue Js 3 next будет в начале 2020 года, более точной даты пока нет.

Subscribe to Блог php программиста: статьи по PHP, JavaScript, MySql

Get the latest posts delivered right to your inbox

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *