Справочник по IT

Русский

Українська
English

Русский

Українська
English

Appearance

Основы Vue.js: Vue 3 ​

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

Ключевые особенности и улучшения Vue 3 ​

  • Composition API: Новая система организации логики компонентов, основанная на функциях (хуках), которая обеспечивает лучшую повторно используемость кода, читаемость и организацию, особенно в больших компонентах. Composition API сосуществует с Options API и может использоваться параллельно.
  • Производительность: Vue 3 значительно быстрее и легче, чем Vue 2. Улучшения включают:
    • Proxy-based reactivity: Вместо Object.defineProperty используется Proxy для более эффективного и полного отслеживания изменений реактивных данных.
    • Virtual DOM rewrite: Переписанный виртуальный DOM обеспечивает более быстрые обновления.
    • Static props hoisting: Оптимизация, при которой статические пропсы не сравниваются при каждом рендеринге.
    • Tree-shaking: Возможность исключения неиспользуемого кода из ядра Vue и компонентов при сборке, что приводит к уменьшению размера бандла.
  • TypeScript support: Vue 3 изначально разработан с учетом TypeScript, что обеспечивает лучшую поддержку статической типизации как для разработчиков, использующих TypeScript, так и для тех, кто использует JavaScript с JSDoc.
  • Teleport: Новый встроенный компонент, который позволяет рендерить часть шаблона компонента в другом месте DOM (за пределами родительского компонента). Это особенно полезно для модальных окон, уведомлений и других элементов, которые логически принадлежат компоненту, но визуально должны находиться в другом месте DOM-дерева.
  • Suspense: Встроенный компонент, который позволяет отображать резервное содержимое (fallback) во время ожидания асинхронных операций внутри шаблона (например, загрузки данных).
  • Multiple root nodes: Компоненты Vue 3 теперь могут иметь несколько корневых узлов в своем шаблоне без необходимости оборачивать их в один элемент.
  • Fragments: Связанная с предыдущей особенностью концепция, при которой виртуальный DOM поддерживает несколько корневых узлов без создания лишнего DOM-элемента-обертки.
  • Custom Renderer API: Предоставляет низкоуровневый API для создания пользовательских рендереров Vue, что позволяет использовать Vue для рендеринга не только в браузер (например, на сервере, в нативных приложениях).
  • Improved Global API: Глобальный API Vue был реорганизован для лучшей ясности и tree-shaking. Например, глобальные mixins были заменены на composables, которые можно импортировать и использовать локально.

Composition API ​

Composition API является одной из ключевых особенностей Vue 3. Вместо организации кода компонента по опциям (data, methods, computed, watch), вы можете организовывать логику по функциональным блокам (composables).

vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

В этом примере ref создает реактивную переменную count. Функция setup является точкой входа для Composition API, где вы объявляете реактивные состояния, вычисляемые свойства, методы и хуки жизненного цикла, которые затем возвращаются и становятся доступными в шаблоне.

Преимущества Composition API ​

  • Лучшая организация кода: Логика, связанная с определенной функциональностью, может быть сгруппирована вместе, даже если она затрагивает разные "опции" Options API.
  • Улучшенная повторно используемость кода: Логику можно легко извлекать в composable-функции и переиспользовать в разных компонентах.
  • Лучшая читаемость и поддержка: Особенно в больших компонентах, где Options API может привести к разбросанности логики.
  • Более гибкая композиция: Легче комбинировать различные логические блоки.
  • Лучшая поддержка TypeScript: Composition API хорошо сочетается с TypeScript, обеспечивая более строгую типизацию.

Options API (поддерживается в Vue 3) ​

Важно отметить, что Options API (с data, methods, computed, watch и хуками жизненного цикла) по-прежнему полностью поддерживается в Vue 3. Вы можете продолжать использовать его, особенно в небольших и средних компонентах, где он может быть более понятным и лаконичным.

vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

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

Создание проекта Vue 3 ​

Для создания нового проекта Vue 3 рекомендуется использовать Vue CLI (версии 4.5+ или 5.x). При создании проекта CLI предложит вам выбрать пресет, включающий Vue 3.

bash
vue create my-vue-app

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

Миграция с Vue 2 на Vue 3 ​

Миграция с Vue 2 на Vue 3 является значительным обновлением, и существует официальное руководство по миграции, которое следует внимательно изучить (https://v3.vuejs.org/guide/migration/introduction.html). Некоторые ключевые изменения, которые следует учитывать при миграции:

  • Изменения в API: Некоторые API были переименованы или удалены (например, глобальные mixins, фильтры).
  • Реактивность: Переход на Proxy-based reactivity может потребовать изменений в некоторых подходах к работе с реактивными данными.
  • Виртуальный DOM: Изменения в виртуальном DOM могут повлиять на некоторые пользовательские рендереры или интеграции.
  • Компонентная структура: Поддержка множественных корневых узлов может потребовать обновления шаблонов.

Vue 3 также предоставляет build-цепочку совместимости (migration build) для облегчения постепенной миграции.

Экосистема Vue 3 ​

Большинство основных библиотек и инструментов экосистемы Vue (например, Vue Router, Vuex) также имеют версии, совместимые с Vue 3 (Vue Router 4, Vuex 4). При обновлении проекта до Vue 3 необходимо также обновить эти зависимости до их последних версий.

Производительность Vue 3 в деталях ​

  • Proxy-based reactivity: Proxy обеспечивает более глубокое и эффективное отслеживание изменений без ограничений Object.defineProperty (например, отслеживание добавления/удаления свойств массива и объектов).
  • Virtual DOM rewrite: Новый алгоритм diffing виртуального DOM более эффективен и требует меньше работы для определения изменений, что приводит к более быстрым обновлениям UI.
  • Static props hoisting: Компилятор Vue 3 анализирует шаблоны и "поднимает" статические пропсы, которые никогда не меняются, чтобы их не нужно было сравнивать при каждом рендеринге.
  • Patch flags: Компилятор также генерирует "флаги" для узлов виртуального DOM, указывающие, какие именно части узла могли измениться, что позволяет Vue 3 выборочно обновлять только эти части.
  • Tree-shaking: Архитектура Vue 3 и его кодовая база спроектированы таким образом, чтобы сборщики (например, Webpack, Rollup) могли эффективно удалять неиспользуемый код, что значительно уменьшает размер финального бандла вашего приложения.

Заключение ​

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