Composition API
Composition API в Vue.js представляет собой современный способ организации логики компонентов, обеспечивающий высокую модульность и повторное использование кода. В отличие от Options API, где состояние, методы и вычисляемые свойства разделены на отдельные блоки, Composition API концентрирует их в функции setup(), что упрощает управление сложными компонентами и повышает читаемость кода. Особенно это важно для крупных приложений, где повторное использование логики между компонентами играет ключевую роль.
Используя Composition API, разработчики могут применять ключевые концепции Vue.js: реактивность через ref и reactive, вычисляемые свойства с помощью computed, отслеживание изменений с watch, а также реализовывать алгоритмы и структуры данных с применением принципов ООП. Такой подход делает код более тестируемым, поддерживаемым и масштабируемым, облегчая интеграцию с архитектурой приложений и современными системами.
В данном руководстве вы научитесь управлять реактивным состоянием, создавать повторно используемые функции (Composables), оптимизировать производительность и избегать распространенных ошибок, таких как утечки памяти или некорректная обработка данных. Примеры ориентированы на практическое применение в реальных проектах Vue.js и помогут углубить понимание передовых подходов разработки компонентов с Composition API.
Базовый Пример
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const counter = ref(0)
const increment = () => {
counter.value++
}
const doubleCounter = computed(() => counter.value * 2)
return {
counter,
increment,
doubleCounter
}
},
template: ` <div> <h1>Счетчик: {{ counter }}</h1> <h2>Двойной счетчик: {{ doubleCounter }}</h2> <button @click="increment">Увеличить</button> </div>
`
}
createApp(App).mount('#app')В этом примере функция setup() является центральной точкой Composition API. Переменная counter создается с помощью ref, что делает её реактивной: любое изменение автоматически отображается в шаблоне. Функция increment изменяет состояние, а doubleCounter вычисляет удвоенное значение автоматически при изменении counter. Возврат переменных из setup() позволяет использовать их в шаблоне, обеспечивая модульность и читаемость.
Важно понимать разницу между ref и reactive, а также использование свойства .value для доступа к значениям ref. Данный подход улучшает тестируемость и повторное использование кода, что критично для крупных проектов на Vue.js.
Практический Пример
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const state = reactive({
tasks: [],
newTask: ''
})
const addTask = () => {
if (state.newTask.trim() !== '') {
state.tasks.push({ text: state.newTask, completed: false })
state.newTask = ''
}
}
watch(() => state.tasks.length, (newVal, oldVal) => {
console.log(`Количество задач изменилось: ${oldVal} → ${newVal}`)
})
const removeTask = (index) => {
state.tasks.splice(index, 1)
}
return {
state,
addTask,
removeTask
}
},
template: ` <div> <h1>Список задач</h1> <input v-model="state.newTask" placeholder="Добавить задачу" /> <button @click="addTask">Добавить</button> <ul> <li v-for="(task, index) in state.tasks" :key="index">
{{ task.text }} <button @click="removeTask(index)">Удалить</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')В этом примере используется reactive для создания реактивного объекта state. Функции addTask и removeTask изменяют массив задач с проверкой на пустую строку. С помощью watch отслеживается изменение длины массива, что позволяет выполнять побочные эффекты, например логирование в консоль. Этот пример демонстрирует применение принципов ООП, модульность и безопасное управление состоянием. Следует избегать прямого манипулирования DOM и корректно очищать watch для предотвращения утечек памяти, что соответствует лучшим практикам Vue.js.
Лучшие практики включают корректный выбор между ref и reactive, безопасное использование computed и watch, обработку ошибок внутри setup() с помощью try/catch. Для отладки рекомендуется Vue Devtools. Для оптимизации производительности стоит использовать ленивые вычисления и избегать тяжелых операций в watch или computed. Также важно проверять входные данные пользователя для обеспечения безопасности и предотвращения ошибок в сложных приложениях Vue.js.
📊 Справочная Таблица
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Создание простой реактивной переменной | const count = ref(0) |
| reactive | Создание реактивного объекта или массива | const state = reactive({ name: '', age: 0 }) |
| computed | Реактивное вычисляемое свойство | const double = computed(() => count.value * 2) |
| watch | Отслеживание изменений данных и выполнение побочных эффектов | watch(() => state.tasks.length, (newVal) => console.log(newVal)) |
| setup | Центральная функция Composition API | setup() { const data = ref(0); return { data } } |
Composition API позволяет эффективно управлять реактивностью, вычисляемыми свойствами и наблюдением изменений, создавая масштабируемые и повторно используемые компоненты. Следующие шаги включают создание Composables, интеграцию с Pinia для управления состоянием и использование async setup и suspense для сложных сценариев. Документация Vue.js и открытые проекты предоставляют ценные ресурсы для углубленного изучения и практического применения.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху