Привет! Меня зовут Влад, я 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 элементы с динамической привязкой, а статические игнорируются.

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

<div> <p> Привет, {{username}} </p> <p> Приятно с тобой познакомиться </p>
<p> Время уже позднее, увидимся завтра </p></div>

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

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

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

<div id="app">
	<div>
		<div>SimbirSoft — компания по разработке программного обеспечения.</div>
		<div>{{ contentDynamic }}</div>
	</div>
</div>

А теперь посмотрим на 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

<script>

import ***axios*** from 'axios';

export default {

data() {

	return {
			
		posts: [],
		
		authorPosts: [],
		
		favoritePost: null,
		
	}

},

mounted() {

	this.fetchPosts();

},

methods: {

	async fetchPosts() {
	
		this.posts = (await axios.get('https://jsonplaceholder.typicode.com/posts')).data;
	
	},
	
	async getPostByAuthor(id) {
	
		this.authorPosts = (await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${id}`)).data;
	
	},
	
	async getCommentsByPost() {
	
		this.comments = (await axios.get('https://jsonplaceholder.typicode.com/posts/1/comments')).data;
	
	},

	addPostToFavorite(id) {
	
		this.favoritePost = this.posts.find(post => post.id === id);
	
	},

},

computed: {

	getFavoritePostId() {
	
		return this.favoritePost?.id;
	
	},

}

}

</script>

Composition API

<script>
import {ref, computed} from 'vue';
import axios from 'axios';

export default {
 setup() {
   /* region posts */
   const posts = ref([]);
   (async () => {
     posts.value = (await axios.get('https://jsonplaceholder.typicode.com/posts')).data;
   })();

   const authorPosts = ref([]);
   const getPostByAuthor = async (id) => {
     authorPosts.value = (await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${id}`)).data;
   };
   /* endregion */

   /* region favoritePosts */
   const favoritePost = ref(null);
   const addPostToFavorite = (id) => {
     favoritePost.value = posts.value.find(post => post?.id === id);
   }

   const getFavoritePostId = computed(() => {
     return favoritePost.value?.id;
   })
   /* endregion */

   /* region comments */
   const comments = ref([]);
   const getCommentsByPost = async (postId) => {
     comments.value = (await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`)).data;
   };
   /* endregion */

   // other logic
   // other logic

   // region return
   return {
     posts,
     comments,
     addPostToFavorite,
     getPostByAuthor,
     getFavoritePostId,
     getCommentsByPost,
   }
   // endregion
 }
}
</script>

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

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

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

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

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

<script>

import { onMounted } from 'vue';
import usePosts from '@/logic/posts';

export default {
 setup() {
   /* region posts */
   const { fetchPosts, addPostToFavorite, favoritePost, posts } = usePosts();

   onMounted(async () => {
     await fetchPosts();
   })

   /* endregion */

   // region return
   return {
     addPostToFavorite,
     favoritePost,
     posts,
   }
   // endregion
 }
}
</script>

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

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" в тэге <script> (доступно с версии 3.2),  данные в компоненте можно определять еще проще.

<script setup>

import { onMounted } from 'vue';
import usePosts from '@/logic/posts';
const { fetchPosts, addPostToFavorite, favoritePost, posts } = usePosts();

onMounted(async () => {
 await fetchPosts();
})

</script>

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

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

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

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

ref

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = 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<number>(() => {
 return post.id;
})

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

Резюме

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

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

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

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

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