Vue.js 3 — это последняя версия популярного JavaScript-фреймворка для создания пользовательских интерфейсов. Vue.js 3 предоставляет ряд новых возможностей и улучшений, которые делают разработку пользовательских интерфейсов еще проще и быстрее. Среди новых возможностей — улучшенная реактивность, Composition API, Teleport, фрагменты и совместимость с Vue.js 2.
npm install -g @vue/cli
vue create my-project
Реактивность
Vue.js использует систему реактивности для отслеживания изменений состояния и автоматического обновления DOM. В Vue.js 3 реактивность была улучшена с помощью новой функции reactive
:
import { reactive } from 'vue';
const state = reactive({ count: 0 });
Composition API
Vue.js 3 вводит новый подход к составлению логики компонентов — Composition API. Это позволяет группировать код по функциональности, делая компоненты более удобными для чтения и поддержки.
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubled, increment };
},
};
Teleport
Теперь с Vue.js 3 вы можете использовать компонент Teleport
для перемещения содержимого компонента в другую часть DOM-дерева. Это особенно полезно для модальных окон, выпадающих меню и тултипов.
<teleport to="#modal-container">
<div class="modal">
<!-- Modal content -->
</div>
</teleport>
Fragments
Vue.js 3 поддерживает фрагменты — компоненты без корневого элемента. Это позволяет создавать компоненты, которые возвращают несколько элементов без необходимости использовать обертку.
<template>
<div>Element 1</div>
<div>Element 2</div>
</template>
Совместимость с проектами Vue.js 2
Vue.js 3 предлагает поддержку большинства возможностей Vue.js 2, что упрощает процесс миграции существующих проектов на новую версию.