0Pricing
Vue Academy · 课时

生命周期钩子与数据获取

在组件生命周期的适当时机获取数据

生命周期钩子与数据获取 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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。对于大多数接口调用，两者均可。

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 加载模式

使用引用，这种加载模式可以顺利地迁移到 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 标志，这样界面就能显示加载指示器、渲染数据并处理空结果。接下来，您将通过处理错误和使用拦截器，让这些请求更加可靠。

常见问题解答

「生命周期钩子与数据获取」课时是免费的吗？

是的 — 「生命周期钩子与数据获取」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「生命周期钩子与数据获取」这节课中我会学到什么？

在组件生命周期的适当时机获取数据 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「生命周期钩子与数据获取」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 Axios 发送 HTTP 请求
  2. 生命周期钩子与数据获取
  3. 错误处理与全局拦截器
← 返回 Vue Academy