ライフサイクルフックとデータ取得
コンポーネントのライフサイクルに適したタイミングでデータを取得します
「ライフサイクルフックとデータ取得」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これは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のほうが少し早く実行されるため、リクエストも早く開始されます。実際にレンダリング済みのDOMが必要な場合にだけmountedを選びましょう。ほとんどのAPI呼び出しでは、どちらでも問題ありません。
Composition APIのonMounted
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
}
}ローディングインジケーターの表示
テンプレートでは、loadingフラグに応じて表示を切り替え、データの到着中にスピナーやメッセージを表示します。
<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でのローディングパターン
同じローディングパターンを、refを使って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（Composition APIではonMounted）で取得します。try/finallyを使ってloadingフラグを管理すると、UIにスピナーを表示し、データを描画し、空の結果にも対応できます。次は、エラー処理とインターセプターを使って、これらのリクエストを堅牢にします。
よくある質問
「ライフサイクルフックとデータ取得」レッスンは無料ですか？
はい。「ライフサイクルフックとデータ取得」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「ライフサイクルフックとデータ取得」で何を学びますか？
コンポーネントのライフサイクルに適したタイミングでデータを取得します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「ライフサイクルフックとデータ取得」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- AxiosによるHTTPリクエスト
- ライフサイクルフックとデータ取得
- エラーハンドリングとグローバルインターセプター