实战清单与排错

你将学会什么

按「script setup → computed → 交互 → watch/通信」的顺序学习
用四步排错顺序快速定位「页面不更新」
知道接口请求为什么要带加载态和错误态

正文

如果你现在刚开始学 Vue3，最不容易遇到阻碍的顺序是：

先学会 <script setup> 和 ref
理解 computed 与响应式依赖
学会用 v-for、v-if、@click 做基础交互
再补 watch、watchEffect 和组件通信

这个顺序优先保证在最短时间内产出可运行的小页面，覆盖面可以后续再补。如果你遇到「页面不更新」「绑定失效」「样式突然错位」，按这个顺序排查通常最快：

确认变量是 ref，读写时带上了 .value
检查 v-for 是否缺少 :key
检查是不是直接把新对象赋值给 reactive，导致引用断裂
确认事件名是 Vue 的 @click 写法，原生 DOM 写法（如 onclick）不会触发事件绑定

很多新手问题源于响应式规则还没有形成直觉，与框架本身无关。

再往上走一步：当你开始做多页面作品集或课程展示站时，最先接触的通常是路由。Vue Router 的最小理解是：路径和组件对应关系、动态参数如何传给页面、前进后退如何保持状态。而课程项目里最常见的动态需求就是从接口获取数据，学生最容易忽略加载态和错误态，一个最小可用的请求结构是：

import { ref } from 'vue'

const data = ref(null)
const loading = ref(false)
const error = ref('')

async function fetchCourses() {
  loading.value = true
  try {
    data.value = await fetch('/api/courses').then((r) => r.json())
  } catch (e) {
    error.value = '加载失败'
  } finally {
    loading.value = false
  }
}

在模板里用 v-if 分别渲染加载中、结果和错误。能做到这一点，你的页面就已经具备生产级交互的基本骨架。

动手练

知识检查

先自己回答，再看答案：

「页面不更新」时，第一步应该检查什么？
接口请求为什么至少要准备三个状态？
做多页面作品集时，最值得补的能力是什么？

参考答案

确认变量是不是 ref，有没有忘记 .value。
加载中、成功、失败三种情况都要有对应状态，页面才不会白屏或持续加载。
路由：路径与组件的对应关系、动态参数、前进后退的状态保持。

本章小结

学习顺序：script setup → computed → v-for/v-if/@click → watch/通信
排错四步：.value → :key → reactive 引用 → 事件写法
接口请求三状态：data、loading、error，用 v-if 分别渲染

实战与排错小测

1 / 3

页面数据没更新时，第一步应该检查什么？

重启开发服务器确认变量是不是 ref，有没有忘记 .value删除组件重新写检查 CSS 文件