03.08.2023 07:56
BusinessSolutionsLab 0 1500 Источник

Всем привет! Мы ИТ-компания BSL - технологический партнер в продуктовой разработке и интеграции. И это наш первый обзорный материал для хабра-блога. В BSL мы успешно разрабатываем фронтовую часть проектов как с использованием старой версии фреймворка Vue, так и с использованием новой. В данной статье наш Team Lead Frontend Developer - Андрей,  рассказал о некоторых нововведениях Vue 3, которые могут стать для вас веской причиной для перехода на новую версию.

Vue 3 — прогрессивный Javascript фреймворк, развитие которого за последние годы просто впечатляет. С февраля 2022 года Vue 3 стал основой версией по умолчанию.

Если вы ещё в раздумьях переходить на новую или хотите поэкспериментировать с vue 3, то данная небольшая статья возможно вам будет в помощь.

Почему это обновление важное?

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

Почему стоит переходить на vue 3?

Если коротко, то Vue 3 станет версией по умолчанию.

Vue 2 будет оставаться в версии LTS (долгосрочная поддержка) еще 18 месяцев с момента выхода Vue 3. Он по-прежнему будет получать обновления безопасности и его можно будет без проблем безопасно использовать еще какое-то время. Не пора ли перенести существующие проекты?

Вот некоторые аргументы на этот счёт от основателя Эвана Вью:

  1. Vue 3 быстрее, меньше, проще в сопровождении и его проще ориентировать на нативные приложения.

    Уменьшение размера достигается за счет сочетания большей модульности кода, меньшего времени выполнения ядра и «tree-shaking-friendly» компилятора. Tree shaking (Встряхивание дерева) — это метод оптимизации библиотек путем удаления любого кода из окончательного файла, который фактически не используется.  Размер нового ядра составляет примерно 10 КБ в сжатом виде против 20 КБ Vue 2.

  2. Обновленные алгоритмы сравнения виртуального DOM.

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

  3. Улучшенная производительность рендеринга.

    Модуль рендеринга Vue 3 повышает производительность процесса рендеринга за счет использования таких оптимизаций , как подъем и встраивание статических частей , а также реализации реактивности Vue 3 с прокси-серверами ES6.

Кроме того, Vue 3 представлен с новыми крутыми обновлениями:

  • Невероятно быстрый набор инструментов, заряженный Vite

  • Более эргономичный синтаксис Composition API с помощью <script setup>

  • Улучшенная поддержка TypeScript в IDE с помощью Volar.

  • Проверка типа через командную строку для SFC через vue-tsc

  • Упрощенное управление состоянием через Pinia

  1. Улучшенная масштабируемость.

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

  2. Более качественный опыт разработчиков.

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

Vite

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

HMR также очень быстрый, поскольку не требуется пересобирать весь пакет, даже если у вас большое приложение.

Composition API

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

Прекратится ли поддержка Options API? Вот сообщение с официального сайта vue:

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

Основные преимущества Composition API:

  • Более гибкая организация кода;

  • Отличная совместимость с TypeScript;

interface Props {
 colors: ColorItem[]
 selectedColors: string[]
}
const props = withDefaults(defineProps<Props>(), {
 colors: () => [] as ColorItem[],
 selectedColors: () => [] as string[]
})

  • Меньший размер конечного бандла;

  • Более лаконичный код с меньшим количеством шаблонов благодаря script setup.

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useParticipantsStore } from '@/stores/participants'
import IconUsers from '@/components/Icons/IconUsers.vue'
import IconAddUser from '@/components/Icons/IconAddUser.vue'
import ParticipantsSidebarList from './ParticipantsSidebarList.vue'
defineProps({
 temp: {
   type: Number,
   default: 0
 }
})
const participantsStore = useParticipantsStore()
const isOpen = ref(false)
const isFirstAnimation = ref(true)
const participantsCount = computed(() => participantsStore.participantsCount)
const toggleSidebar = () => {
 isOpen.value = !isOpen.value
 isFirstAnimation.value = false
}
const addUser = () => {
 console.log('addUser')
}
</script>

Основные проблемы Options API

Vue 2 поддерживает несколько способов повторного использования кода между компонентами:

  • Компоненты высшего порядка

  • Компоненты без рендеринга

  • Миксины

Все эти способы имеют свои недостатки:

  • Конфликты пространств имен в компонентах более высокого порядка и примесях;

  • Непонятно откуда берутся параметры компонентов при использовании примесей;

  • Затраты на производительность.

Vuex сейчас находится в режиме обслуживания. Он по-прежнему работает, но больше не получит новых обновлений. При создании новых приложений теперь рекомендуется использовать Pinia.

import { defineStore } from 'pinia'
import type { Tool } from '@/type/common'
export const useToolsStore = defineStore({
 id: 'tools',
 state: () => {
   return {
     tools: [] as Tool[]
   }
 },
 actions: {
   addTool (tool: Tool) {
     this.tools.push(tool)
   },
   deleteTool (tool: Tool) {
     this.tools = this.tools.filter(el => {
       return el.id !== tool.id || el.type !== tool.type
     })
   },
   deleteToolsParticipant (id: string) {
     this.tools = this.tools.filter(tool => tool.id !== id)
   },
   clearTools () {
     this.tools = [] as Tool[]
   }
 }
})

Простой и продуманный API Pina делает написание ваших состояний таким же привычным как и создание компонентов. Pinia также отлично дружит с TypeScript и предоставляет автозаполнение в вашей IDE в отличии от Vuex.

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

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

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

В компании BSL Vue 3 хорошо показал себя на боевых проектах. Скорость разработки увеличилась на 15-20%, повысилась читаемость кода и снизился порог входа новых разработчиков в проекты примерно на 20%. Мы начали повсеместно переходить на него. К недостаткам можно отнести небольшое количество библиотек, нужно учитывать это при планировании, т.к. некоторые библиотеки приходится реализовывать с нуля.

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

Комментарии (0)