Vue 3 что нового

Хочу перемен: почему пора переходить на Vue 3

Привет! Меня зовут Влад, я frontend-разработчик в компании SimbirSoft. Мне приходилось создавать приложения как на старых версиях Vue, так и на новых. Причем многие из моих коллег вполне успешно разрабатывают на Vue 2 и не спешат переходить на Vue3, даже спустя два года после релиза.

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

В этой статье попытался раскрыть новшества, которые могут стать «триггером» для миграции на новую технологию для обеих заинтересованных групп. Поговорим об экосистеме Vue 3, о новинках и пользе для разработчиков и бизнеса. И, разумеется, сравним Vue 2 и Vue 3 с технической точки зрения. Также рассмотрим одно из главных нововведений фреймворка – Composition API, раскроем технические нюансы и определим лучшие кейсы использования нового API.

История появления Vue

Vue – это Javascript-фреймворк для разработки пользовательских интерфейсов.

Создателем и главным разработчиком фреймворка является бывший работник Google Эван Ю. Первый коммит Vue был сделан в июне 2013 года и назывался Seed.js. Но, как выяснилось, имя seed было уже занято в npm, и название изменили на Vue.

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

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

Преимущества Vue 3

Концепция и основная идея новой версии Vue 3 возникли в 2018 году. На текущий момент времени с момента выхода Vue 3 версии прошло почти два года (дата релиза – сентябрь 2020 года).

Она включает в себя масштабные изменения в исходном коде и новый API. В ней также значительно улучшена производительность – в среднем 1,5-2 раза быстрее прошлой. Исходный код фреймворка был переписан с нуля, а при помощи использования TypeScript изменена система реактивности. А Vetur, официальное расширение VSCode, теперь поддерживает проверку типов у шаблона и свойств с использованием улучшенной внутренней типизации Vue 3.

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

Преимущества для разработчиков

Улучшенная интеграция с TypeScript

Vue 3 был полностью переписан на TypeScript и на текущий момент обеспечивает полноценную поддержку TypeScript. Все официальные пакеты Vue 3 поставляются со встроенными объявлениями типов, которые должны работать «из коробки».

А Composition API хорошо работает с типизацией данных в приложении.

Новые API для крупных приложений

Vue 3 предоставляет совершенно новый API Composition API — это мощнейшее решение, которое в полной мере разрешает проблемы Options API Vue 2 версии, а также предоставляет расширенные возможности в декларировании и управлении данными в фреймворке. Новый API позволяет облегчить реализацию сложных архитектурных решений в крупных и средних приложениях, по средствам обеспечения логической связанности и возможности повторного использования, похожую на хуки в React.

Порог входа

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

Таким образом, исполнителю нужно меньше опыта, чтобы вносить доработки в текущую кодовую базу на Vue.

Фреймворк также отличает гибкость и модульность – можно моментально приступить к созданию приложения, не тратя лишнее время на конфигурирование c помощью инструмента командной строки VUE CLI.

Архитектура приложений

Vue использует подход ViewModel из шаблона MVVM. Он хорошо работает для более крупных приложений, используя двустороннюю привязку данных. Основная цель Vue – дать простой и гибкий уровень представления, а не полноценный фреймворк.

Документация

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

Остальные преимущества:

• Новая концепция реактивности.
• Улучшенная оптимизация и производительность.
• Composition API.
• Практически полная обратная совместимость с API второй версии.
• Паттерн для повторного использования логики компонентов.

Преимущества для бизнеса

Безопасность

Хотя автоматически защитить приложения от XSS и других уязвимостей невозможно, разработчики Vue могут санитизировать HTML-код перед реализацией или использовать внешние библиотеки для защиты от атак. В тех случаях, когда вы знаете, что HTML безопасен, можно явно отображать содержимое HTML и защищать приложение до и после рендеринга. Исходя из последних статистических данных, следует отметить, что последняя уязвимость была обнаружена во второй версии Vue

Улучшение производительности

Vue 3 показывает значительные улучшения производительности. Если вы работаете с продуктом, который требует быстрого обновления содержимого и контента, выбор очевиден – это Vue 3. Новая версия имеет следующие показатели:

Поддержка

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

Остальные преимущества Vue 3:

• Улучшенная адаптация под большие и средние проекты.
• Ориентация на современные вспомогательные инструменты, в частности, улучшена поддержка TypeScript.
• Новые функциональные возможности для решения бизнес-задач.
• Улучшение процессов разработки и отладки продукта на всех этапах.

Ключевые функциональные преимущества Vue 3

В этом разделе рассмотрим самые интересные функциональные улучшения новой версии Vue.

Изменённые алгоритмы сравнения виртуального DOM

Процесс изменения реального DOM дерева в Vue построен на вызове функции, которая сравнивает два объекта Vnode (oldNode, vNode), и последующем патчинге изменений в DOM браузера. В Vue 2 такой алгоритм был построен на сравнении всех узлов без фокуса на тип узла.

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

Рассмотрим следующий пример:

 
 
Привет, >
 
Приятно с тобой познакомиться
 
Время уже позднее, увидимся завтра
 

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

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

Для лучшего понимания концепции статического подъема рассмотрим однородную структуру шаблона компонента на следующем примере:

 
 
SimbirSoft — компания по разработке программного обеспечения.
 
>
 
 

А теперь посмотрим на render-функцию для версий Vue 2 и Vue 3

Vue 2

function render() < var vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', < attrs: < "id": "app" >>, [_c('div', [_c('div', [_vm._v(" " + _vm._s(_vm.msg) + " ")]), _c('div', [_vm._v( " SimbirSoft -- компания по разработке программного обеспечения. " )])])]) >

Во Vue 2 независимо от того, является ли элемент статическим, он повторно создается в render-функции. Затем рендерится в шаблоне, задействуя при этом больше ресурсов.

Vue 3

import < createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock >from "vue" const _hoisted_1 = < id: "app" >const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "SimbirSoft — компания по разработке программного обеспечения.", -1 /* HOISTED */) export function render(_ctx, _cache, $props, $setup, $data, $options) < return (_openBlock(), _createElementBlock("div", _hoisted_1, [ _createElementVNode("div", null, [ _hoisted_2, _createElementVNode("div", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */) ]) ])) >

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

Новая концепция реактивности

Реактивность – это механизм декларативного обновления данных в шаблоне, которые объявлены в коде. Во Vue 2 такой механизм строился на «геттерах» и «сеттерах» путём переопределения свойств объекта в инстансе Vue c помощью Object.defineProperty.

Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект или функцию и позволяет «перехватывать» их.

Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством. Подробнее про реактивность в новой версии можно прочитать здесь.

Конечно, в целом, концептуальных изменений гораздо больше. По ссылкам ниже можно найти еще несколько дополнительных интересных особенностей:

• Cache Handlers кеширование обработчиков.
• Продвинутые компоненты Vue 3.
• Порталы.
• Улучшенное монтирование.
• Обновленное двухстороннее связывание данных.

А мы перейдем к рассмотрению одного из главных нововведений Vue 3.

Composition API

Composition API – это совершенно новое решение организации компонентов в Vue 3. Оно представляет собой набор API:

• API реактивности – сущности ref и reactive.
• Методы для взаимодействия с жизненным циклом компонента, onMounted, onUpdated и другие.
• Внедрение зависимостей provide/inject.

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

Улучшенная организация кода в компонентах

Рассмотрим структуру двух совершенно одинаковых компонентов для взаимодействия с постами с точки зрения использования разных API.

Options API

Composition API

Как мы видим, в случае с composition API, структурировать код по логическому назначению легче. Это позволяет сохранять читаемость и масштабируемость компонента.

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

Методы, которые предоставляет нам Vue 2 для решения проблем декомпозиции и переиспользования кода в больших компонентах, иногда приводят к побочным эффектам. Например, Mixins может перезатереть уже существующий функционал, а Provide Inject, исходя из документации, рекомендовано использовать не во всех случаях. Кроме того, по умолчанию данные, монтируемые с помощью provide/inject, не реактивны.

С новым API мы можем инкапсулировать логику взаимодействия с постами и комментарии отдельно, а также переиспользовать в любом компоненте с помощью хука. Рассмотрим на примере.

Для наглядности упростим компонент до минимального функционала: получение и добавление поста в избранное. Логику вынесем за пределы компонента.

Наш внешний файл с логикой

import < ref >from 'vue'; import axios from 'axios'; const posts = ref([]); const favoritePost = ref(null); export default function usePosts () < const fetchPosts = async () => < posts.value = (await axios.get('https://jsonplaceholder.typicode.com/posts')).data; >const addPostToFavorite = (id) => < favoritePost.value = posts.value.find(post =>post?.id === id); > return < posts, favoritePost, addPostToFavorite, fetchPosts, >>

Как мы видим, с помощью новых возможностей легко отделить логику в внешний файл и использовать, где потребуется. Поле для масштабируемости данного подхода огромно. Вплоть до отказа от всеми известного менеджера состояний Vuex. С помощью данного подхода мы можем организовывать свой store без использования сторонних библиотек. Тем, кто любит архитектурные решения, рекомендуем взглянуть на npm-пакет Pinia.

А благодаря синтаксическому сахару в виде дополнительного атрибута «setup» в тэге (доступно с версии 3.2), данные в компоненте можно определять еще проще.

Магия! Не правда ли?

Улучшенная поддержка TypeScript

В старой версии для внедрения поддержки TypeScript необходимо было использовать классовые компоненты и декораторы. Это не всегда удобно и в целом усложняет процесс разработки.

С появлением Composition API всё изменилось. Новый синтаксис позволяет использовать типизацию с минимальными трудозатратами. Рассмотрим на примерах.

ref

import < ref >from 'vue' import type < Ref >from 'vue' const year: Ref = ref('2020') year.value = 2020 // отлично

reactive

import < reactive >from 'vue' interface Post < id: number; title: string; >const post: Post = reactive(< id: 1222, title: 'Название' >)

computed

import < computed >from 'vue' const postId = computed(() => < return post.id; >)

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

Резюме

Для меня как разработчика, преимущественно на фреймворке Vue, новая версия показала себя с хорошей стороны. По сути, это тот же продукт, который не потерял концепцию декларативного инструмента и в то же время решил проблемы прошлых версий. Стало легче работать с большими объемами данных. К тому же, в третьей версии улучшена поддержка типизации TypeScript. Кроме этого, мы получили новые функциональные возможности, которые предоставляют улучшение процесса разработки в целом.

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

Если на момент релиза это все еще был новый инструмент со своими подводными камнями, практически отсутствием npm пакетов и фреймворков, адаптированных под новую версию, то сейчас можно с уверенностью сказать, что Vue 3 – оптимальная версия фреймворка на текущий момент.

Надеемся, статья была вам полезна!

Больше кейсов и полезных материалов для владельцев продуктов — в нашем ВК и Telegram.

Основы Vue 3

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

Vue 3 является логическим продолжением предыдущей версии фреймвока — Vuejs 2, первый релиз которого вышел еще в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично развивается. В сентябре 2020 года вышла текущая версия фреймворка — Vue 3, особенностью которой стало то, что эта версия полностью написана на языке TypeScript вместо JavaScript, который использовался ранее. Собственно в данном руководстве рассматривается именно версия Vue 3.

Следует отметить, что Vue 3, хотя и продолжает традицию Vue.js 2.x и имеет много общего, тем не менее также имеет определенные отличия. Причем команда разработчиков Vue продолжит выпускать и поддерживать Vue.js 2.x. В связи с чем данное руководство посвящено именно версии Vue 3, а касательно предыдущей версии — Vue.js 2.x необходимую информацию можно найти в отдельном руководстве по Vue.js.

Официальный сайт фреймворка — https://v3.vuejs.org/, где можно найти непосредственно файлы фреймворка, а также сопроводительные материалы и документацию. Кроме того, сам проект доступен на github по адресу https://github.com/vuejs/docs-next.

Vue 3 имеет довольно небольшой размер и при этом обладает хорошей производительностью по сравнению с такими фреймворками как Angular или React, а также по сравнению с предыдущей версией — Vue.js 2.x. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.

Одним из ключевых моментов в работе Vue 3 является виртуальный DOM . Структура веб-страницы, как правило, описывается с помощью DOM (Document Object Model), которая представляет организацию элементов html на странице. Для взаимодействия с DOM (добавления, изменения, удаления html-элементов) применяется JavaScript. Но когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее.

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

Vue 3 поддерживается всеми основными современными браузерами.

Первое приложение

Создадим первое приложение на Vue 3. Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Это можно сделать разными способами. Самый простой представляет загрузка файлов фреймворка из CDN по ссылке:

https://unpkg.com/vue@next

Также можно установить Vue 3 через пакетный менеджер npm с помощью команды:

npm install vue@next

В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:

      
 
>
 
     

Чтобы создать объект приложения в Vue 3 применяется функция Vue.createApp . В эту функцию передается объект, который определяет используемые данные через параметр data и выполняемые в приложении действия через параметр methods .

Данные представляют объект, который содержит одно свойство — message — некоторая строка, которая выводится на веб-страницу:

data() < return < message: 'Hello Vue 3!' >>

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

Параметр methods определяет действия, которые выполняются в приложении:

methods: < setMessage(event)< this.message = event.target.value; >>

Здесь определен только один метод setMessage, который является обработчиком события ввода для элемента input на странице. Через параметр event в этот метод передается информация о событии. Так, через свойство event.target.value можно получить введенное в текстовое поле значение и присвоить его свойству message. Для получения свойства message, которое была определено выше в параметре data, применяется ключевое слово this .

А для связи элемента input с этим методом определяется атрибут v-on:input=»setMessage» .

И в конце, чтобы связать созданный объект Vue с конкретным элементом веб-страницы, применяется метод mount() . В этот метод передается селектор html-элемента:

.mount('#app')

Так, в данном случае мы говорим, что объект Vue будет выполняться в рамках элемента html с идентификатором app.

Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):

И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.

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

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

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

Composition API

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

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

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

• Приостановление рендеринга компонента при определённых условиях
• Фрагменты (виртуальные элементы, которые не будут отображаться в DOM-дереве)
• Перезапись виртуального DOM для лучшей производительности и улучшенная поддержка TypeScript
• Глобальное монтирование
• Родные порталы — теперь они называются Teleport (фича будет предоставляться из коробки)

Переход из 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 году.

• Что, когда и как?
• Внутренние изменения. Переход на Proxy
• Composition API
• Suspense
• Fragments
• Portals
• Оптимизация рендеринга
• Добавлена поддержка TypeScript
• Оптимизация размера
• Ресурсы для изучения Vue3
• Итог

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

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

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

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

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

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

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

1. Реактивные свойства не могут быть динамически добавлены/удалены.
2. Существует 2 проблемы, связанные с динамическими массивами.
   • Изменение элемента путем обращения к нему по индексу не является реактивным.
   • Изменение длины массива не является реактивным.

// Установка элемента при обращении к нему по индексу - НЕ РЕАКТИВНО vm.items[indexOfItem] = newValue // Изменение длины массива - НЕ РЕАКТИВНО vm.items.length = newLength 

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

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

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

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

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

• Обнаружение добавления/удаления свойств
• Обнаружение случаев изменения индекса массива/длины
• Поддержка для Map, Set, WeakMap и WeakSet

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

Введение в Composition API

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

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

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

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

import < reactive, computed >from 'vue' export default < setup() < // API Vue composition описывает реактивные свойства ядра let state = reactive(< input: "", groceries: [], groceriesLeft: computed(() =>groceries.length) >); function addGrocery() < state.groceries.push(state.input); state.input = ""; >function deleteGrocery(index) < state.groceries.splice(index, 1); >return < state, addGrocery, deleteGrocery >; > >

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

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

import < reactive, computed >from 'vue'

Применение метода setup() является одним из самых больших изменений в Vue3. По сути, он позволяет определить, какие данные/функции передаются из компонента обратно в шаблон. Всё, что он возвращает — доступно в шаблоне.

export default < setup() < // . 

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

let state = reactive( < input: "", groceries: [], groceriesLeft: computed(() =>groceries.length) >);

Оборачивая все эти данные методом reactive , все эти данные автоматически становятся реактивными. Этот шаблон состояния взят из документации по Composition API.

Следует отметить, что мы объявляем переменную groceriesLeft . Как видите, она является computed-свойством и определяется прямо в методе setup() . Больше нет никаких отдельных вычисляемых свойств, теперь в одном месте определяются и data и computed свойства!

function addGrocery() < state.groceries.push(state.input); state.input = ""; >function deleteGrocery(index)

Это просто определение типичных старых функций. Единственное, что тут действительно уникально, это то, что поскольку все реактивные данные хранятся в объекте состояния, мы должны сохранить его в переменную и обращаться к его своствам. Но это не специфично для Vue3 - это просто обычные объекты на Javascript.

return < state, addGrocery, deleteGrocery >;

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

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

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

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

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

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

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

• Создания страниц с загрузкой
• Ожидания ответов от API для обработки
• Подходит для любого вида получения данных по API или асинхронной загрузки

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

Фрагменты в Vue3

Фрагменты - бескорневые компоненты, т.е. компоненты, которые в template содержат больше одного родительского элемента. В Vue2 каждый компонент должен иметь один и только один корневой элемент.
И иногда это может быть той ещё головной болью.

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

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

 
Hello World 

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

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

 Hello World 

 
 
Hello
 
World
 
 

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

Ох. А ещё Portals

Portals - это еще одна функция, изначально появившаяся в React, которая в настоящее время планируется к внедрению в Vue3.

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

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

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

Вот скриншот примера и код из документации portal-vue.

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

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

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

1. Оптимизации блочного дерева
2. Статический подъем деревьев

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

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

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

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

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

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

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

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

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

• Полностью статическую структуру узлов
• Статический контент, который не нужно отслеживать.
• Динамические узлы, которые могут храниться в обычном массиве

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

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

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

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

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

Поддержка Typescript

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

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

Если ты такой же, как я, то, возможно, спрашиваешь "Зачем TypeScript?". Для начала - это хайпово, использовать TypeScript везде, где есть JavaScript: фронтенд, бекенд.
Кроме всего прочего, Typescript позволяет вам добавлять статическую типизацию в ваш проект на Javascript. Это само по себе очень поможет вам поддерживать проекты в долгосрочной перспективе.

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

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

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

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

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

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

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

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

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

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

При написании этой статьи я потратил много времени на RFC (Request for Comment) и репозиторий vue 3 github - vue-next (официальный Vue3).

Ты готов.

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

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

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

В серці. Назавжди.

Вчора у мене помер однокласник. А сьогодні бабуся. І хто б міг уявити, що цей рік принесе війну, смерть товариша, та смерть члена сім'ї? Це боляче. Проте це добре нагадування про те, як швидко тече час. І як його ціна збільшується кожної марно витраченої секунди. І я не скажу щось

20 мая 2022 г. 1 min read

Ось такий він, руський мир

"Руський мир" - звучить дуже сильно та виправдовуюче. Гарна обгортка виправдання слабкості, аморальності та нікчемності своїх дійсних намірів. Руський мир, який дуже солодко звучить для всіх, хто хоче закрити очі на факт повномасштабної війни. Дуже добре виправдання вбивства для купки звірів. Втім, це ж росія, в якій все виглядає логічно

16 апр. 2022 г. 3 min read

Перехват запросов и ответов JavaScript Fetch API

Перехватчики - это блоки кода, которые вы можете использовать для предварительной или последующей обработки HTTP-вызовов, помогая в обработке глобальных ошибок, аутентификации, логирования, изменения тела запроса и многом другом. В этой статье вы узнаете, как перехватывать вызовы JavaScript Fetch API. Есть два типа событий, для которых вы можете захотеть перехватить HTTP-вызовы: