Как перейти с Vue v.2 на Vue v.3

Что такое Vue.js?

Vue.js - это прогрессивный JavaScript-фреймворк, написанный Эваном Ю. Это один из самых мощных и простых в освоении фреймворков, который скачивается более 9,5 миллионов раз в месяц.

В сентябре 2020 года было выпущено ядро ​​Vue 3. В новом выпуске Vue.js представлены некоторые интересные новые функции, а также некоторые важные изменения.

Зачем мне переходить на Vue3?

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

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

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

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

Вступление

В новой версии Vue.js есть несколько критических изменений и новых функций. Кроме того, популярные библиотеки, такие как Vue Router, были обновлены для поддержки новой версии Vue.

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

В этом руководстве я постараюсь упростить задачу и покажу вам, как перенести проект Vue.js, который в настоящее время использует Vue 2 CDN.

Что вам нужно следовать вместе с этой статьей? - Чтобы продолжить, вам потребуются базовые знания Vue.js и Vue Router.

О чем мы расскажем в этой статье?

Это руководство состоит из трех основных глав. Сначала мы рассмотрим изменения в Vue.js v3.x, а затем краткий обзор Vue Router v4.x. И, наконец, приступим к планированию миграции реального проекта.

  • Обзор Vue v3.x
  • критические изменения
  • Обзор Vue Router v4.x
  • критические изменения
  • Портфолио - перенос проекта
  • Клонировать репо
  • Обновите скрипты CDN
  • Обновить экземпляр Vue
  • Обновить экземпляр Vue Router

Обзор Vue v3.x

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

Критические изменения Vue V3.x

В Vue 3 критические изменения в основном делятся на семь категорий:

  1. Глобальный API (отвечает за поведение Vue) - весьма вероятно, что вы захотите посмотреть на эти изменения.
  2. Директивы шаблона (изменения, внесенные в работу директив v-) - весьма вероятно, что вы захотите посмотреть на эти изменения.
  3. Компоненты (изменения в работе компонентов) - если ваше приложение использует компоненты, весьма вероятно, что вы захотите посмотреть на эти изменения.
  4. Функция рендеринга (позволяет создавать элементы HTML программно)
  5. Пользовательские элементы (сообщает Vue о создании пользовательских элементов HTML)
  6. Незначительные изменения (они могут не повлиять на вас, но вы все равно захотите их изучить)
  7. Удаленные API (вещи, которые больше не доступны в Vue 3)

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

И стоит отметить следующие дополнительные изменения:

  • Изменился способ создания приложений Vue и экземпляров компонентов (глобальный API)
  • Опцию данных всегда следует объявлять как функцию (незначительное изменение)
  • Изменение приоритета при использовании v-if и v-for для одного и того же элемента (шаблон Ddrectives)
  • Вы должны объявить опцию испускания для событий компонентов (компонентов)

Полный список изменений вы можете найти в документации. Давайте теперь рассмотрим некоторые из этих изменений более подробно.

Как создать экземпляры приложений и компонентов в Vue 3

В Vue 3 способ создания приложения изменился. Приложение Vue теперь использует новый .createApp() метод для создания экземпляров приложения.

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

Корневой элемент HTML не изменился, поэтому внутри файла index.html вы все равно увидите что-то вроде этого:

<div id="app"></div>

Внутри файла JavaScript есть важное изменение, которое вам необходимо понять: вы больше не будете использовать его new Vue() для создания нового экземпляра приложения, но вместо этого вы будете использовать новый метод с именем createApp():

// Vue 3 syntax

const app = Vue.createApp({
    // options object
})
app.mounth('#app') // Vue Instance - Root component

// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
})

Как определить компонент в Vue 3

Чтобы определить компонент в Vue 3, вы больше не используете Vue.component(). Вместо этого теперь вы используете корневой компонент приложения, например:

/* Vue 3 syntax */
const app = Vue.createApp({
    // options here
})

app.component('componenet-name', {
    // component code here
})


/* Vue 2 syntax*/
Vue.component('component-name', {
    // component code here
})

Как использовать объект параметров данных в Vue 3

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

// Vue 3
const app = Vue.createApp({
    // options object
    data(){
        return {
            message: 'hi there'
        }
    }
})
app.mounth('#app') // Vue Instance - Root component

// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
    data: {
        message: 'hi there'
    }
})

Изменение приоритета v-if / v-for в Vue 3

В Vue 2, если вы использовали обе директивы для одного и того же элемента, директива v-for имела приоритет над v-if. Но в Vue 3 v-if всегда имеет приоритет.

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

Как использовать свойство Emits для событий компонентов в Vue 3 (критическое изменение / новая функция)

Подобно propsсвойству, теперь в Vue 3 также есть emits свойство, которое компонент может использовать для объявления событий, которые он может передавать родительскому компоненту.

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

Вот пример из официальной документации:

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

Свойство emits также может принимать объект.

Обзор Vue Router v4.x

С новым выпуском Vue.js у нас также есть новая версия Vue Router. В новом выпуске v4.x есть некоторые критические изменения, которые вам необходимо учитывать, если вы хотите перенести проект на новый выпуск Vue.

Критические изменения

Vue Router V4 Особо стоит упомянуть два критических изменения, поскольку они лежат в основе приложения Vue Router. Вам нужно будет узнать о них, чтобы позже перенести приложение.

  • Экземпляр Vue Router изменился
  • Есть новый вариант истории

Полный список изменений доступен здесь. Давайте рассмотрим эти два изменения более подробно.

Экземпляр Vue Router 4 изменился

Чтобы создать новый экземпляр Vue Router, вы больше не используете конструктор функции VueRuter.

Вот документация Vue Router v.3x, чтобы вы могли сравнить.

Код меняется от этого:

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

К этому:

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(), // <-- this is a new property and it is mandatory!
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

В приведенном выше коде для создания нового экземпляра маршрутизатора Vue теперь необходимо использовать объект VueRouter и вызвать createRouter() метод.

Также обязательно новое свойство истории - history: VueRouter.createWebHashHistory(). Вы должны его определить, иначе получите консольную ошибку.

Затем вы создадите экземпляр Vue с помощью createApp()метода и воспользуетесь переменной appдля вызова .use()метода. Вы передаете туда экземпляр маршрутизатора, созданный на предыдущем шаге.

Наконец, вы можете смонтировать корневой элемент DOM в экземпляре приложения, используя app.mount('#app').

Как перенести проект с Vue 2 на Vue 3

Учитывая все вышесказанное и внимательно изучив критические изменения, давайте попробуем обновить один из наших проектов моим курсом Vue. Я буду использовать портфолио, последний проект курса.

Нам потребуется:

  • Клонировать репо
  • Обновите скрипты CDN
  • Обновите экземпляр Vue
  • Обновите экземпляр Vue Router

Чтобы перенести наше приложение на Vue 3, нам обязательно нужно обновить следующее:

  • Экземпляр приложения Vue
  • Экземпляр Vue-Router
  • Ссылки на CDN

Давайте рассмотрим это шаг за шагом.

Клонировать репозиторий проекта

Во-первых, убедитесь, что вы клонируете репо внутри текущей папки:

git clone https://bitbucket.org/fbhood/vue-folio/src/master/ vue-folio

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

Обновите CDN проекта

В нашем проекте мы используем как Vue CDN, так и Vue Router CDN, поэтому давайте обновим их оба.

Откройте файл index.html и замените его:

<!-- VueJS 3 production version -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

с этим:

    <!-- VueJS 3 -->
    <script src="https://unpkg.com/vue@3"></script>

    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@4"></script>

Обновите код

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

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

Uncaught TypeError: window.Vue.use is not a function
    at vue-router.js:1832
    at vue-router.js:9
    at vue-router.js:10

Uncaught ReferenceError: VueRouter is not defined
    at main.js:185

Маршрутизатор Vue ?! Почему?

Что ж, помните, что когда Vue был переписан, его библиотеки тоже должны были обновить свою кодовую базу. Так что не забывайте о критических изменениях, связанных с Vue-router, поскольку наше приложение его использует.

Давайте сначала обновим основной экземпляр Vue, чтобы использовать новый синтаксис. Затем мы посмотрим, какие изменения нам нужно внести, чтобы Vue Router работал.

Обновите этот код внутри файла main.js следующим образом:

// create and mount the Vue instance

const app = new Vue({
    router
}).$mount('#app')

с этому:

// create and mount the Vue instance

const app = Vue.createApp({
    router
})
app.mount('#app')

Изменения Vue Router 4

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

Изменился способ создания экземпляра Vue Router.

Изменилось с этого:

// create the router instance
const router = new VueRouter({
    routes
})

к этому:

// create the router instance
const router = VueRouter.createRouter({
    // Provide the history implementation to use. We are using the hash history for simplicity here.
    history: VueRouter.createWebHashHistory(),
    routes, // short for `routes: routes`
})

В приведенном выше коде есть два основных изменения: new VueRouter() был заменен на VueRouter.createRouter(), и historyт еперь новый параметр заменяет mode.

Наконец, давайте проинформируем наше приложение о том, что мы используем Vue Router. Если мы внедрили экземпляр маршрутизатора в приложение Vue, теперь нам нужно указать ему использовать маршрутизатор Vue, использовать для этого .use() метод и передать ему экземпляр маршрутизатора.

Измените это:

// create and mount the Vue instance

const app = Vue.createApp({
    router
})
app.mount('#app')

к этому:

// create and mount the Vue instance

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

Вот оно!

Заключение

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

Чем сложнее приложение, тем более тщательно вы должны планировать миграцию.

Для нашего простого приложения это все, что нужно сделать. Но так бывает не всегда. Так что будьте готовы и планируйте заранее.

Спасибо за прочтение!

Читайте также

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

    Написать комментарий