В процессе развития библиотек и фреймворков неизбежно происходят изменения API. Часть из них может нарушать обратную совместимость. Такие изменения называются breaking changes — изменения, из-за которых существующий код перестаёт работать без модификаций.
Для библиотек пользовательского интерфейса, включая Vuetify, breaking changes особенно чувствительны, поскольку затрагивают:
Наиболее заметные breaking changes произошли при переходе между крупными версиями библиотеки:
Каждая из этих миграций включала значительное обновление архитектуры.
Breaking changes возникают по нескольким причинам.
По мере развития проекта появляются более эффективные архитектурные решения. Старые API становятся ограничивающими и требуют переработки.
Пример:
Это потребовало изменения внутренних механизмов компонентов.
Иногда API становится перегруженным. Поддержка устаревших параметров усложняет библиотеку.
Breaking changes позволяют:
Оптимизация рендеринга может потребовать изменения структуры компонентов или способа передачи данных.
Например:
Современные версии Vue, CSS и браузеров предоставляют новые возможности. Чтобы использовать их полноценно, иногда требуется отказаться от старых подходов.
Версия Vuetify 3 стала самым масштабным обновлением библиотеки. Она полностью построена на Vue 3 и Composition API.
Основные изменения затронули:
В предыдущей версии установка происходила через создание экземпляра Vuetify:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
const vuetify = new Vuetify()
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')В новой версии используется функция createVuetify.
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
const vuetify = createVuetify()
createApp(App)
.use(vuetify)
.mount('#app')Изменения:
app.usenew Vuetify()Layout строился через компоненты:
v-appv-contentv-containerv-layoutv-flexПример:
<v-container>
<v-layout row>
<v-flex xs12 md6>
Content
</v-flex>
</v-layout>
</v-container>Система layout была полностью переработана.
Удалены компоненты:
v-layoutv-flexИспользуется современная CSS Grid / Flexbox-модель.
Новые компоненты:
v-rowv-colПример:
<v-container>
<v-row>
<v-col cols="12" md="6">
Content
</v-col>
</v-row>
</v-container>Основные изменения:
Темы настраивались через объект theme.
new Vuetify({
theme: {
themes: {
light: {
primary: '#1976D2',
secondary: '#424242'
}
}
}
})Темы создаются внутри createVuetify.
const vuetify = createVuetify({
theme: {
defaultTheme: 'light',
themes: {
light: {
colors: {
primary: '#1976D2',
secondary: '#424242'
}
}
}
}
})Breaking changes:
defaultThemeИконки часто подключались через глобальную настройку:
icons: {
iconfont: 'mdi'
}Использование:
<v-icon>mdi-home</v-icon>Система стала более модульной.
import { aliases, mdi } from 'vuetify/iconsets/mdi'
createVuetify({
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi
}
}
})Изменения:
Во многих компонентах были изменены имена props.
v-btn<v-btn color="primary" dark>
Button
</v-btn><v-btn color="primary" variant="elevated">
Button
</v-btn>Breaking changes:
dark и lightvariantВозможные варианты:
elevatedoutlinedtexttonalflatplainВо многих компонентах был изменён синтаксис слотов.
<v-data-table>
<template v-slot:item.name="{ item }">
{{ item.name }}
</template>
</v-data-table>Некоторые слоты были переименованы или изменили структуру параметров.
<v-data-table>
<template #item.name="{ value }">
{{ value }}
</template>
</v-data-table>Изменения:
В старых версиях Vuetify активно использовались утилиты:
pa-4ma-2text-xs-centerЧасть утилит была пересмотрена или заменена современными CSS-подходами.
Пример:
class="d-flex align-center justify-center"Некоторые классы были удалены или переименованы.
Компоненты форм получили обновлённый API.
<v-text-field
label="Name"
outlined
dense
></v-text-field><v-text-field
label="Name"
variant="outlined"
density="compact"
></v-text-field>Breaking changes:
outlined → variant="outlined"dense → density="compact"Это сделало API более единообразным.
Некоторые директивы были удалены или изменены.
Например:
v-rippleПример:
<v-btn v-ripple>
Click
</v-btn>Vuetify 3 активно использует tree-shaking. Это означает, что компоненты могут импортироваться выборочно.
import { VBtn, VCard } from 'vuetify/components'Преимущества:
Однако это также изменяет структуру импорта компонентов.
Vuetify 3 разделён на модули:
vuetify/componentsvuetify/directivesvuetify/stylesvuetify/iconsetsЭто breaking change для проектов, использующих старые импорты.
Vuetify 3 получил глубокую интеграцию с TypeScript.
Это привело к:
В старых проектах могут появляться ошибки типов.
При обновлении крупных версий обычно применяются несколько подходов.
Разработчики Vuetify публикуют подробные руководства миграции, содержащие:
Многие компоненты требуют переписывания:
В некоторых случаях используются codemod-скрипты, которые автоматически:
Однако полностью автоматическая миграция обычно невозможна.
После перехода на новую версию Vuetify часто возникают проблемы:
Причина:
Причина:
Причина:
Причина:
Несмотря на сложности миграции, breaking changes позволяют библиотеке:
Для долгосрочных проектов понимание этих изменений становится важной частью работы с экосистемой Vue и Vuetify.