Хуки жизненного цикла и получение данных
Получайте данные в подходящий момент жизненного цикла компонента
«Хуки жизненного цикла и получение данных» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Когда загружать данные
У компонентов есть жизненный цикл: они создаются, монтируются в DOM, обновляются и в конечном итоге размонтируются. Знание того, какой хук жизненного цикла использовать для загрузки данных, помогает сохранить приложение отзывчивым и корректным.
Хук created
Хук created выполняется после настройки реактивных данных, но до вставки компонента в DOM. Это подходящее место для начала загрузки данных, поскольку реактивность уже работает.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}Хук mounted
Хук mounted выполняется после вставки компонента в DOM. Используйте его, если логике загрузки требуется доступ к элементам DOM или сторонним библиотекам, которым нужен отрисованный элемент.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created и mounted
Для загрузки только данных подходят оба варианта. Хук created срабатывает немного раньше, поэтому запрос начинается быстрее. Выбирайте mounted только тогда, когда Вам действительно нужен отрисованный DOM. Для большинства вызовов API подойдёт любой из них.
onMounted в Composition API
В Composition API хуки жизненного цикла — это импортированные функции, вызываемые внутри setup. Эквивалентом mounted является onMounted.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Шаблон состояния загрузки
Сетевые запросы занимают время. Отслеживайте флаг loading, чтобы показывать индикатор загрузки, пока данные поступают, и скрывать его после завершения.
data() {
return {
posts: [],
loading: false
}
}Переключение состояния загрузки
Установите loading в значение true перед запросом и верните в значение false после него независимо от результата.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Отображение индикатора загрузки
В шаблоне проверяйте флаг загрузки, чтобы показывать индикатор или сообщение, пока данные загружаются.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Обработка пустых результатов
Всегда предусматривайте пустой ответ. Показывайте понятное сообщение, если в загруженном списке нет элементов.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Шаблон загрузки в Composition API
Тот же шаблон загрузки легко перенести в Composition API с помощью реактивных ссылок.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Отображение загруженных данных
После помещения данных в реактивное состояние шаблон автоматически отображает их. Объединяйте состояния загрузки, данных и пустого результата, чтобы сделать взаимодействие с приложением более продуманным.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Быстрая проверка
Проверьте свои знания о хуках жизненного цикла и загрузке данных.
Повторение
Загружайте данные в created или mounted (либо в onMounted при использовании Composition API). Отслеживайте флаг loading с помощью try/finally, чтобы пользовательский интерфейс мог показывать индикатор загрузки, отображать данные и обрабатывать пустые результаты. Далее Вы сделаете эти запросы более надёжными: добавите обработку ошибок и перехватчики.
Часто задаваемые вопросы
Урок «Хуки жизненного цикла и получение данных» бесплатный?
Да — полный текст урока «Хуки жизненного цикла и получение данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Хуки жизненного цикла и получение данных»?
Получайте данные в подходящий момент жизненного цикла компонента Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Хуки жизненного цикла и получение данных»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- HTTP-запросы с Axios
- Хуки жизненного цикла и получение данных
- Обработка ошибок и глобальные перехватчики