Впервые выпущенный в 2013 году, Vue представляет собой прогрессивный фреймворк для создания пользовательских веб-интерфейсов. Это адаптируемый, а не монолитный фреймворк, который интегрируется с другими фреймворками, такими как React и Angular. Хотя Vue ориентирован только на уровень представления, он может легко работать с одностраничными приложениями (SPA). Этот проект с полностью открытым исходным кодом поддерживается на его странице GitHub.

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

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

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

Раньше Vue 2 имел только официальные объявления типов для TS. Разработчикам приходилось устанавливать TS с помощью npm и использовать дополнительные плагины, чтобы избежать ошибок. Это часто требовало сложных и окольных методов использования TS в приложении Vue 2. API Vue 3 идентичен как для TS, так и для JavaScript, а это означает, что в Vue 3 мы получаем одинаковый уровень встроенной поддержки для обеих платформ.

Давайте кратко рассмотрим, как определить компонент Vue с помощью TS в Vue 3.

import { defineComponent } from 'vue'
    const Component = defineComponent({
        // type inference enabled
    })

Пример здесь импортирует defineComponent, чтобы TS мог правильно выводить типы внутри компонента Vue. Если мы хотим использовать однофайловые компоненты, мы должны включить в код следующие теги:

<script lang="ts"></script>

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

Телепорт

Телепорт — одна из захватывающих функций Vue 3. Во Vue 2 это называлось порталами и требовало подключаемых модулей и дополнительных инструментов.

Vue поощряет разработчиков создавать системы пользовательского интерфейса (UI), которые содержат как пользовательский интерфейс, так и связанное с ним поведение внутри компонентов. Затем эти компоненты могут вкладываться друг в друга в древовидном формате. Хотя это отличный способ создания пользовательского интерфейса, во многих случаях мы хотим, чтобы часть компонента существовала где-то еще в объектной модели документа (DOM) с технической точки зрения. Телепортация в Vue 3 позволяет нам иметь части шаблонов, такие как модальные окна, живущие в отдельном компоненте без кучи запутанных CSS или композиционных изменений. Этот код, найденный в документации Vue, позволяет нам проиллюстрировать это изменение.

Давайте взглянем на следующую структуру HTML:

<body>
        <div style="position: relative;">
            <h3>Tooltips with Vue 3 Teleport</h3>
            <div>
                <modal-button></modal-button>
            </div>
        </div>
    </body>

Этот HTML-код создает базовую страницу с обычной модальной кнопкой. На данный момент модальное окно наследует атрибуты CSS родительского тега div. Во Vue 2 для того, чтобы модальное окно наследовало атрибуты тега body, нам нужно было использовать плагины портала или создать какой-то запутанный и подверженный ошибкам CSS. Однако в Vue 3 мы используем новую функцию телепорта, чтобы отправить модальную кнопку в тело. Мы делаем это, даже не удаляя его из исходного места в DOM.

Следующий код достигает этой цели немного проще, чем инструменты Vue 2:

app.component('modal-button', {
        template: `
            <button @click="modalOpen = true">
                Open full screen modal! (With teleport!)
            </button>

        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                    I'm a teleported modal! 
                    (My parent is "body")
                <button @click="modalOpen = false">
                    Close
                </button>
                </div>
            </div>
        </teleport>
        `,
        data() {
            return {
                modalOpen: false
            }
        }
    })

Это так же просто, как использовать <teleport to="body"> для применения CSS-атрибутов тега body к созданному модальному модальному окну. В этом примере мы создали место для кнопки на странице, но само модальное окно функционирует как полноэкранное модальное окно.

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

Фрагменты

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

Обратите внимание, что фрагменты требуют, чтобы разработчики определяли атрибуты non-prop, когда это необходимо. Несобственные атрибуты — это атрибут или прослушиватель событий, передаваемый компоненту, но требующий дальнейшего определения при использовании.

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

<template>
        <header>...</header>
        <main v-bind="$attrs">...</main>
        <footer>...</footer>
    </template>

В этом примере мы видим, что нам нужно только создать шаблон, и оттуда мы легко создадим несколько узлов без тега div. Тег <main> включает пример привязки атрибута non-prop, который иногда требуется при использовании фрагментов в Vue 3.

Фрагменты отлично подходят для уменьшения путаницы в DOM и создания более чистого кода.

Вывод

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

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

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

SpreadJS, например, — это решение для работы с электронными таблицами на JavaScript, которое прекрасно работает в Vue. Разработчики легко создают настраиваемые, многофункциональные электронные таблицы, информационные панели, отчеты и многое другое, используя только Vue и SpreadJS.

Или вы можете попробовать Wijmo, коллекцию компонентов пользовательского интерфейса, также доступную в React и Angular. Wijmo, как и SpreadJS, имеет массу полезных функций, таких как возможность создавать гибкие диаграммы и сетки данных внутри Vue. Wijmo очень легкий и не оставит большого следа в вашем проекте. Это дает разработчикам больше свободы при использовании Vue 3.

Испытайте инструменты GrapeCity с 30-дневной бесплатной пробной версией без каких-либо обязательств.