组合式 API 的三个关键点（PPT 第 27 页）#

PPT 第 27 页专门列了三个必须记住的点：

以及一条容易被绊倒的注意（PPT 第 27 页的”注意”，也是第 30 页的必答题）：

在 Vue 中的组合式 API 使用时，是没有 this 对象的，this 对象是 undefined。

也就是说：选项式里的 this.count++，在组合式里要写成 count.value++——ref() 包出来的东西不是”裸值”，而是”装着值的盒子”，读写都要经过 .value。

（模板里是例外：{{ count }} 直接写变量名就行，Vue 会自动帮我们取 .value。所以 PPT 第 26 页的按钮里写的是 count:{{ count }}。）

第一步：装 axios（PPT 第 29 页）#

PPT 第 29 页专门提示：

1
npm install axios     # 项目中用到 axios，就需要安装 axios 的依赖

第二步：写页面组件#

工程里新建页面组件 src/views/EmpList.vue，然后在根组件 App.vue 里引入它（上面那段 App.vue 代码）。这就是课程的完整案例代码（逐行看注释）：

1
<script setup>
2
import { ref, onMounted } from 'vue';
3
import axios from 'axios';
4

5
//表单（用来装用户输入的查询条件）
6
const emp = ref({name: '',gender: '',job: ''})
7

8
//钩子函数
9
onMounted(() => {
10
  search();
11
})
12

13
//查询
14
const search = async () => {
15
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);
16
  empList.value = result.data.data;
17
}
18

19
//清空
20
const clear = () => {
21
  emp.value = {name: '',gender: '',job: ''};
22
  search();
23
}
24

25
const empList = ref([]);
26
</script>
27

28
<template>
29
  <div id="container">
30
    <!-- 搜索表单 -->
31
    <el-form :inline="true" :model="emp" class="demo-form-inline">
32
      <el-form-item label="姓名">
33
        <el-input v-model="emp.name" placeholder="请输入姓名" />
34
      </el-form-item>
35

36
      <el-form-item label="性别">
37
        <el-select v-model="emp.gender" placeholder="请选择">
38
          <el-option label="男" value="1" />
39
          <el-option label="女" value="2" />
40
        </el-select>
41
      </el-form-item>
42

43
      <el-form-item label="职位">
44
        <el-select v-model="emp.job" placeholder="请选择">
45
          <el-option label="班主任" value="1" />
46
          <el-option label="讲师" value="2" />
47
          <el-option label="学工主管" value="3" />
48
          <el-option label="教研主管" value="4" />
49
          <el-option label="咨询师" value="5" />
50
        </el-select>
51
      </el-form-item>
52

53
      <el-form-item>
54
        <el-button type="primary" @click="search">查询</el-button>
55
        <el-button type="info" @click="clear">清空</el-button>
56
      </el-form-item>
57
    </el-form>
58

59
    <!-- 表格 -->
60
    <el-table :data="empList" border style="width: 100%">
61
      <el-table-column prop="id" label="ID" width="100" align="center"/>
62
      <el-table-column prop="name" label="姓名" width="120"  align="center"/>
63
      <el-table-column label="头像" width="180"  align="center">
64
        <template #default="scope">
65
          <img :src="scope.row.image" height="40px">
66
        </template>
67
      </el-table-column>
68
      <el-table-column label="性别" width="180"  align="center">
69
        <template #default="scope">
70
          {{ scope.row.gender == 1 ? '男' : '女'}}
71
        </template>
72
      </el-table-column>
73
      <el-table-column label="职位" width="180"  align="center">
74
        <template #default="scope">
75
          <span v-if="scope.row.job == 1">班主任</span>
76
          <span v-else-if="scope.row.job == 2">讲师</span>
77
          <span v-else-if="scope.row.job == 3">学工主管</span>
78
          <span v-else-if="scope.row.job == 4">教研主管</span>
79
          <span v-else-if="scope.row.job == 5">咨询师</span>
80
          <span v-else>其他</span>
81
        </template>
82
      </el-table-column>
83
      <el-table-column prop="entrydate" label="入职日期" width="180"  align="center"/>
84
      <el-table-column prop="updatetime" label="更新时间"  align="center"/>
85
    </el-table>
86
  </div>
87
</template>
88

89
<style scoped>
90
#container {
91
  width: 70%;
92
  margin-left: 15%;
93
  margin-right: 15%;
94
}
95
</style>

模板里的 <el-form>、<el-table> 这类以 el- 开头的标签是 ElementPlus 组件——那是 PPT 第 31~50 页的内容，97 篇会一个个讲清楚。这一篇只盯住”数据是怎么来的”：<script setup> 里那 20 行。

第三步：看运行结果（本机实测）#

本机实测的页面（npm run dev 之后用普通 Chrome 打开 http://localhost:5173）：

表格渲染出的 4 行真实数据（接口 https://web-server.itheima.net/emps/list 返回的）：

本机实测还有两个真实观察（不影响案例理解，但值得知道）：

• 头像列是裂图：课程数据里头像用的是阿里云 OSS 的图片链接（web-framework.oss-cn-hangzhou.aliyuncs.com/...），本机实测这些链接已经加载不出来了。代码本身没问题（<img :src="scope.row.image"> 就是 20 篇 v-bind 的用法），换成本地图片或能访问的链接就正常。
• “更新时间”没有格式化：这一列直接显示后端返回的完整时间串（2026-09-29T13:31:19），课程原样没有做格式化——真实项目里这一步通常由前端格式化，或者后端直接返回好看的格式。

本机实测踩坑：接口对”无头浏览器”返回 405#

1
curl 不带 UA（或带普通 Chrome 的 UA）   → 200（正常返回数据）
2
curl 带 HeadlessChrome 的 UA            → 405

一、知识回顾（读完直接做下面的实践题）#

1. Vue 项目的开发流程：入口文件（src/main.js）→ 根组件（src/App.vue）→ 默认首页；index.html 是项目里唯一的 HTML 页面，body 里只有 <div id="app">，由 <script type="module" src="/src/main.js"> 加载脚本
2. 入口文件 main.js 干三件事：引入 Vue 的 createApp、引入根组件 App、createApp(App).mount('#app') 把它挂到 #app 上
3. 根组件 App.vue 决定页面上显示什么：要展示某个页面组件（比如 src/views/EmpList.vue），就在它的 <script setup> 里 import 进来、写进 <template>
4. 单文件组件（SFC） 就是 *.vue 文件，把一个组件的逻辑（JS）、模板（HTML）、样式（CSS） 封装在同一个文件里；三块分别是 <template>、<script setup>、<style scoped>（scoped = 样式只作用于当前组件）
5. 两种 API 风格：选项式 API 用 data / methods / mounted 等选项对象描述组件逻辑，选项里的属性都暴露在 this 上（指向组件实例）；组合式 API 是 Vue3 提供的基于函数的组件编写方式，更灵活、更可组合
6. 组合式 API 三个关键点：ref() 接收一个内部值、返回响应式的 ref 对象（只有一个指向内部值的属性 value）；onMounted() 是组合式 API 的钩子方法，注册的回调在组件挂载完成后执行；setup 是一个标识（写在 <script setup> 上）
7. 组合式 API 里没有 this（是 undefined）；更新响应式数据用 xxx.value（如 empList.value = result.data.data、count.value++）；模板里直接写变量名即可
8. 案例三步：页面加载完毕（onMounted 里调用查询函数）→ axios 发异步请求（地址 https://web-server.itheima.net/emps/list，条件用模板字符串拼成查询参数）→ 把 result.data.data 赋给 empList，表格自动渲染
9. 接口返回值是两层：result.data 是响应体，再一层 .data 才是员工数组（后端返回结构 {code, msg, data}）
10. 本机实测的两个坑：① 黑马接口按 User-Agent 拦截无头浏览器（带 HeadlessChrome 的 UA 返回 405，普通 Chrome 的 UA 返回 200），所以用普通浏览器打开 5173 正常，代码没问题；该接口支持跨域，案例不需要配代理；② 案例数据里的头像 OSS 链接本机实测已失效（裂图）、更新时间未格式化，都不影响案例理解

二、裸写题#

• 2-1 做一个”计数器”组件 要求：页面上有一个按钮和一行文字，文字显示当前数字（初始为 0）；点一次按钮数字加 1。用工程里的组件写法（一个 .vue 文件三块齐全）。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：数字必须是”响应式的”，否则改了页面不动；点击事件绑到按钮上，处理函数里改这个数字 二级 · 方法：用 ref(0) 声明响应式变量；用 <script setup> 里的普通函数改 变量.value；模板里用 @click="函数名" 绑事件、{{ }} 显示 三级 · 骨架：import { ____ } from 'vue' / const count = ____(0) / function increment(){ count.____++ } / <button @click="____">count:{{ ____ }}</button>

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref } from 'vue';
  3
  
  4
  const count = ref(0);        //响应式变量：初始值 0
  5
  
  6
  function increment(){       //声明函数
  7
    count.value++;             //组合式 API 没有 this，改数据要走 .value
  8
  }
  9
  </script>
  10
  
  11
  <template>
  12
    <button @click="increment">count:{{ count }}</button>
  13
    <!-- 模板里直接写变量名，Vue 会自动取 .value -->
  14
  </template>
  15
  
  16
  <style scoped>
  17
  </style>

  显示更多显示更少

  对照 PPT 第 26~27 页的组合式 API 示例。检查点：① 点一下数字 +1；② 把 count.value++ 改成 count++，页面就不动了（这就是”没有 .value 就没有生效”的典型症状）。

• 2-2 把选项式 API 的代码改写成组合式 API 下面是一段选项式 API 的代码，要求改写成组合式 API 的写法（<script setup>），行为保持一致：

  1
  createApp({
  2
    data() {
  3
      return {
  4
        empList: [],
  5
        keyword: ''
  6
      }
  7
    },
  8
    methods: {
  9
      loadData() {
  10
        this.keyword = '已加载';
  11
      }
  12
    },
  13
    mounted() {
  14
      this.loadData();
  15
    }
  16
  }).mount('#app')

  显示更多显示更少
  提示（先自己想，实在想不出再点开）

  一级 · 思路：选项式的”选项”在组合式里各有去处——data 里的属性变成 ref() 变量，methods 里的方法变成普通函数，mounted 变成 onMounted(回调) 二级 · 方法：ref([]) / ref('')；函数里改值用 .value；onMounted(() => { ... }) 里调用那个函数；别再用 this 三级 · 骨架：import { ref, ____ } from 'vue' / const empList = ref([____]) / const keyword = ref('') / function loadData(){ keyword.____ = '已加载' } / ____(() => { loadData() })

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref, onMounted } from 'vue';
  3
  
  4
  // data 里的属性 → ref() 声明的响应式变量
  5
  const empList = ref([]);
  6
  const keyword = ref('');
  7
  
  8
  // methods 里的方法 → 普通函数
  9
  function loadData() {
  10
    keyword.value = '已加载';   //this.keyword → keyword.value
  11
  }
  12
  
  13
  // mounted 选项 → onMounted 注册回调
  14
  onMounted(() => {
  15
    loadData();
  16
  });
  17
  </script>
  18
  
  19
  <template>
  20
    <p>{{ keyword }}</p>
  21
  </template>
  22
  
  23
  <style scoped>
  24
  </style>

  显示更多显示更少

  对照表：data() 里的属性 → ref()；this.xxx → xxx.value；methods 里的方法 → <script setup> 里的普通函数；mounted(){} → onMounted(() => {})；全程没有 this。

• 2-3 页面一打开就自动去接口取数据 要求：写一个组件，页面加载完毕后自动向 https://web-server.itheima.net/emps/list 发一次请求（不带任何查询条件），把返回的员工数组存进一个响应式变量，并先用一个列表把员工姓名显示出来。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三件事——准备一个空数组、页面加载完发请求、拿到数据塞进数组；要发请求就得先装 axios 二级 · 方法：npm install axios；import axios from 'axios'；ref([]) 装数据；onMounted 里调用一个 async 函数；await axios.get(地址)，数据在 result.data.data；页面上用 v-for 渲染姓名 三级 · 骨架：const empList = ref([____]) / const loadData = async () => { const result = await ____.get('地址'); empList.value = result.data.____ } / onMounted(() => { ____() }) / <li v-for="e in ____" :key="e.id">{{ e.____ }}</li>

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref, onMounted } from 'vue';
  3
  import axios from 'axios';
  4
  
  5
  //装接口返回的员工数据（先给空数组）
  6
  const empList = ref([]);
  7
  
  8
  //查询：发异步请求，把数据塞进 empList
  9
  const loadData = async () => {
  10
    const result = await axios.get('https://web-server.itheima.net/emps/list');
  11
    empList.value = result.data.data;   //两层：响应体 .data 里的 data 才是数组
  12
  }
  13
  
  14
  //钩子函数：组件挂载完成后执行 → 页面加载完毕自动查一次
  15
  onMounted(() => {
  16
    loadData();
  17
  })
  18
  </script>
  19
  
  20
  <template>
  21
    <ul>
  22
      <li v-for="e in empList" :key="e.id">{{ e.name }}</li>
  23
    </ul>
  24
  </template>
  25
  
  26
  <style scoped>
  27
  </style>

  显示更多显示更少

  检查点：① 页面上出现 4 个姓名（谢逊、韦一笑、黛绮丝、殷天正）；② 一定要用普通浏览器打开页面——本机实测带 HeadlessChrome 的 User-Agent 会被黑马接口拦成 405（普通浏览器正常，且接口支持跨域、不需要配代理）。

• 2-4 排查：点了按钮数字不变 / 数据改了页面不动 下面这段代码”点了按钮页面没反应”，指出问题在哪并改好（一共 3 处问题）：

  1
  <script setup>
  2
  import { onMounted } from 'vue';
  3
  
  4
  let count = 0;
  5
  
  6
  function increment(){
  7
    count.value++;
  8
  }
  9
  
  10
  onMounted(){
  11
    console.log('Vue Mounted ...');
  12
  }
  13
  </script>
  14
  
  15
  <template>
  16
    <button @click="increment">count:{{ count }}</button>
  17
  </template>

  显示更多显示更少
  提示（先自己想，实在想不出再点开）

  一级 · 思路：问题都在”组合式 API 的写法规则”上：普通变量不是响应式的、.value 只能用在 ref 对象上、钩子要用函数注册的方式 二级 · 方法：① 从 vue 里把 ref 一起引入；② 用 ref(0) 声明变量；③ onMounted 要接收一个回调函数（onMounted(() => { ... })），不是写成选项式那样的方法 三级 · 骨架：import { ref, ____ } from 'vue' / let count = ____(0) / onMounted(____ => { console.log(...) })

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref, onMounted } from 'vue';   //① 补上 ref 的引入
  3
  
  4
  const count = ref(0);                   //② 用 ref() 声明响应式变量（原来只是普通变量）
  5
  
  6
  function increment(){
  7
    count.value++;                        //这行写法是对的：ref 对象要改 .value
  8
  }
  9
  
  10
  onMounted(() => {                       //③ 钩子要注册回调函数
  11
    console.log('Vue Mounted ...');
  12
  })
  13
  </script>
  14
  
  15
  <template>
  16
    <button @click="increment">count:{{ count }}</button>
  17
  </template>

  显示更多显示更少

  症状对照：

  • 用 let count = 0（普通变量）时，改了它 Vue 不知道，页面不会重新渲染——想要”数据驱动视图”，变量必须用 ref()（或其它响应式 API）声明。
  • count.value++ 写在普通变量上时，count.value 是 undefined，undefined++ 得到 NaN。
  • onMounted(){...} 这种写法在组合式 API 里是错的：它期望接收一个回调函数，要写成 onMounted(() => {...})。

三、综合题#

• 3-1 照课程案例做一遍：员工列表数据渲染（组合式 API） 需求（和 PPT 第 29 页一样）：页面加载完毕后发送异步请求，加载数据，渲染表格。分步做：

  1. 在 95 篇建好的工程里，装上发请求要用的依赖
  2. 在 src/views 下新建页面组件 EmpList.vue，把 <script setup> / <template> / <style scoped> 三块先搭起来
  3. 声明两个响应式变量：一个装查询条件（姓名、性别、职位，初值都是空字符串）、一个装员工数组（初值是空数组）
  4. 写一个查询函数：把三个查询条件拼进接口地址，发请求，把返回的数组交给第 3 步那个变量
  5. 注册钩子：组件挂载完成后调用查询函数（这样”页面打开就有数据”）
  6. 在模板里把数组渲染成表格（一行一条记录）；先在根组件 App.vue 里引入这个页面组件，页面才会显示它
  7. 打开浏览器（用普通 Chrome/Edge）验证：表格里有 4 行数据；再点”查询”按钮确认能按条件查 （这一题不要求写 ElementPlus 的表格组件——用你最熟的方式把数据展示出来即可，97 篇会用组件库重做一遍这张表。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：整题就是”数据 → 请求 → 渲染”三步，唯一的新东西是”用钩子让它在页面打开时自动执行” 二级 · 方法：npm install axios；ref() 两个变量；async 函数里 await axios.get(地址)，数据取 result.data.data；onMounted 里调用它；条件用模板字符串拼成 ?name=xxx&gender=xxx&job=xxx；App.vue 里 import 页面组件并放进模板 三级 · 骨架：const emp = ref({name:'', gender:'', job:''}) / const empList = ref([]) / const search = async () => { ... } / onMounted(() => { ____() }) / <table>…<tr v-for="e in ____" :key="e.id">…</tr></table> / App.vue：import EmpList from './views/____.vue'

  参考答案（做完再点开）

  1
  <!-- src/views/EmpList.vue（数据部分照课程工程写，模板这里用普通 HTML 表格示意） -->
  2
  <script setup>
  3
  import { ref, onMounted } from 'vue';
  4
  import axios from 'axios';
  5
  
  6
  //① 查询条件（响应式对象）
  7
  const emp = ref({name: '', gender: '', job: ''});
  8
  
  9
  //② 员工数组（先给空数组）
  10
  const empList = ref([]);
  11
  
  12
  //③ 查询：拼条件 → 发请求 → 把数组交给 empList
  13
  const search = async () => {
  14
    const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);
  15
    empList.value = result.data.data;
  16
  }
  17
  
  18
  //④ 钩子：页面加载完毕后自动查一次
  19
  onMounted(() => {
  20
    search();
  21
  })
  22
  </script>
  23
  
  24
  <template>
  25
    <div id="container">
  26
      <!-- 查询条件：姓名 / 性别 / 职位 -->
  27
      <input v-model="emp.name" placeholder="请输入姓名">
  28
      <select v-model="emp.gender">
  29
        <option value="">请选择</option>
  30
        <option value="1">男</option>
  31
        <option value="2">女</option>
  32
      </select>
  33
      <select v-model="emp.job">
  34
        <option value="">请选择</option>
  35
        <option value="1">班主任</option>
  36
        <option value="2">讲师</option>
  37
        <option value="3">学工主管</option>
  38
        <option value="4">教研主管</option>
  39
        <option value="5">咨询师</option>
  40
      </select>
  41
      <button @click="search">查询</button>
  42
  
  43
      <!-- 表格：渲染 empList -->
  44
      <table border="1" cellspacing="0" width="100%">
  45
        <tr>
  46
          <th>ID</th><th>姓名</th><th>性别</th><th>职位</th><th>入职日期</th><th>更新时间</th>
  47
        </tr>
  48
        <tr v-for="e in empList" :key="e.id" align="center">
  49
          <td>{{ e.id }}</td>
  50
          <td>{{ e.name }}</td>
  51
          <td>{{ e.gender == 1 ? '男' : '女' }}</td>
  52
          <td>{{ e.job }}</td>
  53
          <td>{{ e.entrydate }}</td>
  54
          <td>{{ e.updatetime }}</td>
  55
        </tr>
  56
      </table>
  57
    </div>
  58
  </template>
  59
  
  60
  <style scoped>
  61
  #container {
  62
    width: 70%;
  63
    margin: 0 auto;
  64
  }
  65
  </style>

  显示更多显示更少

  1
  <!-- src/App.vue：让根组件显示这个页面 -->
  2
  <script setup>
  3
  import EmpList from './views/EmpList.vue'
  4
  </script>
  5
  
  6
  <template>
  7
    <EmpList></EmpList>
  8
  </template>
  9
  
  10
  <style scoped>
  11
  </style>

  检查点：

  1. 命令行有没有报错、浏览器控制台有没有红字（本机实测 405 那种”服务器拦 UA”的问题只在无头浏览器上出现，用普通浏览器不会遇到）；
  2. 页面上出现 4 行数据（谢逊 / 韦一笑 / 黛绮丝 / 殷天正）；
  3. 性别一列显示的是”男 / 女”而不是 1 / 2（说明渲染时真的在做判断）；
  4. 把接口地址故意写错，刷新页面——表格变空、控制台报错，这正好验证了”数据是请求来的”，改回来即可。 做完这一题，97 篇会把这张”手搓的表格”换成组件库的 el-table，对比着看就知道组件库省了多少事。