什么是生命周期#

定义（PPT 原文）：生命周期：指一个对象从创建到销毁的整个过程。

Vue 的实例（就是我们 createApp({...}) 出来的那个应用）也一样有”出生 → 干活 → 结束”的过程：创建 → 挂载到页面上 → 数据更新时重渲染 → 卸载销毁。每个阶段被触发时，Vue 会自动执行一个”生命周期方法”（也叫”钩子函数”）——我们把这些方法写在选项对象里，就等于在”某个时间点”预约了一段代码。

八个阶段和八个钩子#

PPT 列了完整的表（这张表要记住阶段名字，尤其是 mounted）：

案例里怎么用#

在选项对象里加一个 mounted()，里面调 this.search()：

1
//钩子函数
2
mounted() {
3
  //页面加载完成之后，发送ajax请求，获取数据
4
  this.search()
5
}

为什么放在 mounted（挂载完成）而不是更早的钩子？因为这时页面元素已经渲染到页面上了——表格、表单都在，search() 拿回来的数据显示上去正好；再早（beforeCreate / created）时还没”上屏”。

PPT 第 42 页的问答页把这一节的重点收成两问两答：

接口没起来时，页面是什么表现#

这个案例强依赖后端接口，所以练习时一定会遇到”接口用不了”的情况。表现和排查方法（21 篇那节讲了原理，这里给案例的具体症状）：

1
async search() {
2
  try {
3
    let result = await axios.get(`...`);
4
    this.empList = result.data.data;
5
  } catch (err) {
6
    console.log(err);
7
    alert('数据加载失败，请稍后重试');   // 或者把提示语显示在页面上
8
  }
9
}

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

1. 案例流程四步：数据准备（searchForm + empList: [] 空数组）→ 发请求（async search() + await axios.get）→ 渲染（v-for / v-bind / v-if，与指令版完全一样）→ 交互（@click 查询/清空 + mounted 自动加载）
2. 数据准备的关键：empList 要先给一个空数组——v-for 遍历 0 次，页面正常只是没有数据行；不给或给 null 会报错
3. 发请求方法：async search() 里 let result = await axios.get(\https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}\`)`，然后 this.empList = result.data.data
4. result.data.data：第一层 data 是 Axios 的响应体，第二层是后端统一返回格式 {code, msg, data} 里的业务数据（员工数组）；少写一层会报 Cannot read properties of undefined
5. 改数据即改页面：this.empList = ... 一句赋值，v-for 就按新数组重新渲染，不需要手动 render()、不需要重新绑事件（对比 18 篇）
6. “清空”按钮：先 this.searchForm = {name:'', gender:'', job:''}，再调一次 this.search()，让页面恢复成全量数据
7. 生命周期：指一个对象从创建到销毁的整个过程；每触发一个生命周期事件就自动执行一个钩子函数；共 八个阶段：beforeCreate（创建前）、created（创建后）、beforeMount（载入前）、mounted（挂载完成）、beforeUpdate（数据更新前）、updated（数据更新后）、beforeUnmount（组件销毁前）、unmounted（组件销毁后）
8. mounted 是这一章的重点钩子：页面加载完毕时发起异步请求、加载数据、渲染页面（PPT 说的生命周期典型应用场景）；写法就是给 createApp({...}) 的选项对象加一个 mounted() { this.search() }
9. 两个脚本怎么写：<script src=".../axios.min.js">（普通脚本）按课程习惯写在 <script type="module">（Vue 模块脚本）前面；因为模块脚本默认延迟执行，所以顺序颠倒也不影响（但别给类库脚本加 async）；这个案例的挂载点是 #container
10. 接口没起来时的表现：表格空白 + 控制台报 Network Error（连不上）/ 404（地址错）/ 405（方式错）/ blocked by CORS policy（跨域）；什么都不报但没数据 = 筛选条件筛没了；用 try / catch 给用户友好提示
11. 前后端分离：前端只负责展示、数据从接口来；后端负责数据、返回 JSON；接口是两边约定的契约——一方换实现，另一方不用改代码

二、裸写题#

• 2-1 页面一打开就自动把数据查回来 页面上有一张”图书”表格（表头 3 列：序号、书名、作者），数据要从接口 https://web-server.itheima.net/emps/list 取（就当它是图书接口用，返回结构是 {code, msg, data:[...]}，每条数据有 name 字段）。要求：

  1. 数据里准备一个空数组 books，表格用循环按它渲染
  2. 写一个方法，请求接口并把返回的数组赋给 books（名字叫什么随意，用 async / await 写）
  3. 打开页面时不用点任何按钮，表格里就该有数据——用生命周期钩子实现
  4. 顺手把”姓名”列显示成数据里的 name（字段名和”图书”不一样，按接口来） （练习文件 test_22_自动加载列表.html 里已经准备好了表头、空数组和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：三件事——数据先摆个空的、写一个”取数”的方法、在”页面加载完”的那一刻调它 二级 · 方法：data 里 books: []；方法前加 async、请求前加 await；返回的数组在 result.data.data；“页面加载完”用生命周期钩子 mounted()（写在 methods 同级，和 data 并列） 三级 · 骨架：let result = ____ axios.get('https://web-server.itheima.net/emps/list'); this.____ = result.data.____; / mounted() { this.____(); } / 表格里 <tr v-____="(b, index) in books" :key="b.id"> + <td>{{b.____}}</td>

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <table>
  3
      <thead>
  4
        <tr><th>序号</th><th>书名</th><th>作者</th></tr>
  5
      </thead>
  6
      <tbody>
  7
        <tr v-for="(b, index) in books" :key="b.id">
  8
          <td>{{index + 1}}</td>
  9
          <td>{{b.name}}</td>
  10
          <td>{{b.entrydate}}</td>
  11
        </tr>
  12
      </tbody>
  13
    </table>
  14
  </div>
  15
  
  16
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  17
  <script type="module">
  18
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  19
  
  20
    createApp({
  21
      data() {
  22
        return {
  23
          books: []   // 先给空数组，等接口数据回来再填
  24
        }
  25
      },
  26
      methods: {
  27
        async load() {
  28
          let result = await axios.get('https://web-server.itheima.net/emps/list');
  29
          this.books = result.data.data;   // 改数据 → v-for 自动重新渲染
  30
        }
  31
      },
  32
      // 生命周期钩子：挂载完成（页面已经渲染出来），在这里自动发请求
  33
      mounted() {
  34
        this.load();
  35
      }
  36
    }).mount('#app');
  37
  </script>

  显示更多显示更少

  检查点：① 打开页面不点任何按钮，表格里就有数据（说明 mounted 生效了）；② 把 mounted() 整个删掉刷新，表格变空——这就是”没写钩子”的对照；③ 控制台里 console.log(result.data) 能看到 {code, msg, data} 这层结构。

• 2-2 带条件的查询 + 清空后重新查 页面上有一个输入框（姓名）、一个”查询”按钮、一个”清空”按钮，和一张员工表格。要求：

  1. 输入框里的内容和数据双向同步（不用手写取值代码）
  2. 点”查询”：把输入框里的内容作为查询条件（参数名 name）拼到地址后面，请求 https://web-server.itheima.net/emps/list，用返回结果渲染表格
  3. 没有查到数据时，表格下方显示”没有匹配的员工”；查到了就显示”共 N 人”
  4. 点”清空”：输入框清空、并自动再查一次（把全部数据取回来）
  5. 请求过程中在页面上显示”加载中…”，失败时显示”加载失败” （练习文件 test_22_带条件查询.html 里已经准备好了表单、表格、提示区和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：查询方法一共三段——“改提示为加载中”→“发请求并渲染”→“出错就改提示”；清空 = 把条件还原 + 调一次查询方法 二级 · 方法：v-model="form.name"；`...?name=${this.form.name}`；this.list = result.data.data；条数用 list.length；错误用 try / catch；清空方法末尾调 this.search() 三级 · 骨架：async search() { this.tip = '加载中…'; try { let result = await axios.____(\https://web-server.itheima.net/emps/list?name=${this.____.name}\`); this.list = result.data.; this.tip = this.list. == 0 ? ‘没有匹配的员工’ : `共 ${this.list.length} 人`; } catch (err) { this.tip = ''; } }/clear() { this.form.name = ''; this.search(); }`

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <input type="text" v-model="form.name" placeholder="请输入姓名">
  3
    <button type="button" @click="search">查询</button>
  4
    <button type="button" @click="clear">清空</button>
  5
  
  6
    <p>{{tip}}</p>
  7
    <table>
  8
      <thead>
  9
        <tr><th>姓名</th><th>职位</th><th>入职日期</th></tr>
  10
      </thead>
  11
      <tbody>
  12
        <tr v-for="e in list" :key="e.id">
  13
          <td>{{e.name}}</td>
  14
          <td>{{e.job}}</td>
  15
          <td>{{e.entrydate}}</td>
  16
        </tr>
  17
      </tbody>
  18
    </table>
  19
  </div>
  20
  
  21
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  22
  <script type="module">
  23
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  24
  
  25
    createApp({
  26
      data() {
  27
        return {
  28
          form: { name: '' },   // 采集输入（v-model 双向绑定）
  29
          list: [],             // 员工列表（先空着）
  30
          tip: ''               // 提示文字
  31
        }
  32
      },
  33
      methods: {
  34
        async search() {
  35
          this.tip = '加载中…';
  36
          try {
  37
            let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.form.name}`);
  38
            this.list = result.data.data;
  39
            this.tip = this.list.length == 0 ? '没有匹配的员工' : `共 ${this.list.length} 人`;
  40
          } catch (err) {
  41
            console.log(err);
  42
            this.tip = '加载失败';
  43
          }
  44
        },
  45
        clear() {
  46
          this.form.name = '';   // 清空输入框里的条件（v-model 会同步到页面）
  47
          this.search();         // 清空后重新查一次，恢复全部数据
  48
        }
  49
      },
  50
      mounted() {
  51
        this.search();   // 页面加载完先查一次
  52
      }
  53
    }).mount('#app');
  54
  </script>

  显示更多显示更少

  检查点：① 打开页面自动加载，提示”共 4 人”（条数以实际为准）；② 输入”谢”再查询，提示”共 1 人”、表格只剩匹配那行；③ 输入 zzz 查询，提示”没有匹配的员工”、表格清空；④ 点”清空”，输入框变空并且表格恢复成全量数据；⑤ 把地址改错，提示”加载失败”。

• 2-3 用钩子做一次”页面打开就显示”的信息 页面上有一行”系统信息”，打开页面时既要显示时间、也要显示一条从接口取来的数据。要求：

  1. 用两个钩子分别做事：一个在创建后（还没渲染到页面时）把时间算好，另一个在挂载完成时去请求接口
  2. 时间用 new Date().toLocaleString() 取（写在数据里的变量上）
  3. 接口请求 https://web-server.itheima.net/emps/list，把返回数据的条数显示出来（形如”接口返回 4 条数据”）
  4. 在控制台把两个钩子的执行顺序打印出来（各一行日志），观察谁先谁后 （练习文件 test_22_生命周期钩子.html 里已经准备好了页面和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：钩子就是”写在选项对象里的、到点自动执行的方法”——名字固定，位置和 data / methods 平级 二级 · 方法：“创建后”是 created()，“挂载完成”是 mounted()；钩子里用 this 读写数据；请求用 await axios.get(...)，条数是 result.data.data.length 三级 · 骨架：created() { console.log('____'); this.time = new Date().toLocaleString(); } / async mounted() { console.log('____'); let result = ____ axios.get('https://web-server.itheima.net/emps/list'); this.count = result.data.____.length; }

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <p>系统时间：{{time}}</p>
  3
    <p>接口返回 {{count}} 条数据</p>
  4
  </div>
  5
  
  6
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  7
  <script type="module">
  8
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  9
  
  10
    createApp({
  11
      data() {
  12
        return {
  13
          time: '',
  14
          count: 0
  15
        }
  16
      },
  17
      // 创建后：数据已经可用，页面还没渲染
  18
      created() {
  19
        console.log('① created：创建后');
  20
        this.time = new Date().toLocaleString();
  21
      },
  22
      // 挂载完成：页面元素已经在页面上了，适合发请求
  23
      async mounted() {
  24
        console.log('② mounted：挂载完成');
  25
        let result = await axios.get('https://web-server.itheima.net/emps/list');
  26
        this.count = result.data.data.length;
  27
      }
  28
    }).mount('#app');
  29
  </script>

  显示更多显示更少

  检查点：① 页面显示当前时间与”接口返回 4 条数据”；② 控制台顺序是 ① created → ② mounted（创建在前、挂载在后）；③ 把 mounted 里的请求换成 created 也能跑——但习惯上”要操作页面/发请求取数据”都放 mounted（PPT 说的典型应用场景），因为那时页面元素已经就绪。

三、综合题#

• 3-1 照着课程案例做一个”员工列表（异步交互版）” 照着 16. Vue-案例-员工列表(异步交互).html 做一遍：页面有顶部导航栏、搜索表单（姓名输入框、性别下拉框、职位下拉框 + 查询/清空按钮）、员工表格（表头 8 列）、页脚，数据来自接口 https://web-server.itheima.net/emps/list。按步骤来：

  1. 数据准备：searchForm（name / gender / job 三个空串）+ empList: []（空数组）
  2. 发请求：写 async search()——把 searchForm 的三个条件拼到地址后面（?name=xxx&gender=xxx&job=xxx），用 await axios.get(...) 取回数据，赋值给 empList（注意取 result.data.data）
  3. 渲染：数据行用 v-for（key 用 id）+ 序号 {{index + 1}}；性别 1/2 显示成”男/女”；头像用属性绑定；职位用条件渲染翻译成中文（1 班主任…5 咨询师、其它”其他”）
  4. 交互：“查询”按钮调 search()；“清空”按钮把 searchForm 还原成三个空串并重新查询一次；三个控件都用双向绑定
  5. 自动加载：用生命周期钩子让页面加载完自动查一次（打开就能看到数据）
  6. 错误处理（加分）：给 search() 套 try / catch，失败时用 alert 或页面提示告诉用户”数据加载失败”
  7. 验证筛选：分别试一次”姓名填一个存在的字”和”姓名填乱码”，确认表格数据真的跟着条件变了 （练习文件 test_22_综合_Vue员工列表.html 里已经准备好了整个页面结构（含样式）、Axios 引入和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先把第 1、2 步写完（数据 + 取数方法），页面自然有数据了再补第 3 步的渲染；表单和按钮是最后一步——每一步都能单独验证 二级 · 方法：async search() { try { let result = await axios.get(地址); this.empList = result.data.data; } catch (err) {...} }；地址用模板字符串拼 `https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`；渲染指令照 20 篇；clear() 末尾调 this.search()；钩子用 mounted() 三级 · 骨架：data() { return { searchForm: { name: '____', gender: '', job: '' }, empList: ____ } } / async search() { let result = await axios.get(\……?name={this.searchForm.____}&gender={this.searchForm.gender}&job=${this.searchForm.job}`); this.empList = result.data.; }/clear() { this.searchForm = { name: ”, gender: ”, job: ” }; this.(); }/mounted() { this.____(); }`

  排错顺序（卡住时按这个查）：

  1. 控制台有没有红字？（Network Error = 接口连不上；404 = 地址错；CORS = 跨域）
  2. F12 的 Network 面板里那条 emps/list 请求回来了吗？返回的 JSON 长什么样？
  3. this.empList = result.data.data 有没有写成 result.data？
  4. 表格是不是有 v-for 但数组名写错（比如写成 empList 之外的名字）？
  5. 挂载点 #container 和页面上容器的 id 对得上吗？
  参考答案（做完再点开）

  模板里的关键部分（其余结构和 20 篇的综合题一样）：

  1
  <div id="container">
  2
    <!-- 搜索表单区域 -->
  3
    <form class="search-form">
  4
      <label for="name">姓名：</label>
  5
      <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">
  6
  
  7
      <label for="gender">性别：</label>
  8
      <select id="gender" name="gender" v-model="searchForm.gender">
  9
        <option value=""></option>
  10
        <option value="1">男</option>
  11
        <option value="2">女</option>
  12
      </select>
  13
  
  14
      <label for="position">职位：</label>
  15
      <select id="position" name="position" v-model="searchForm.job">
  16
        <option value=""></option>
  17
        <option value="1">班主任</option>
  18
        <option value="2">讲师</option>
  19
        <option value="3">学工主管</option>
  20
        <option value="4">教研主管</option>
  21
        <option value="5">咨询师</option>
  22
      </select>
  23
  
  24
      <button type="button" v-on:click="search">查询</button>
  25
      <button type="button" @click="clear">清空</button>
  26
    </form>
  27
  
  28
    <!-- 表格展示区 -->
  29
    <table>
  30
      <thead>
  31
        <tr>
  32
          <th>序号</th><th>姓名</th><th>性别</th><th>头像</th>
  33
          <th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th>
  34
        </tr>
  35
      </thead>
  36
      <tbody>
  37
        <tr v-for="(e, index) in empList" :key="e.id">
  38
          <td>{{index + 1}}</td>
  39
          <td>{{e.name}}</td>
  40
          <td>{{e.gender == 1?'男' : '女'}}</td>
  41
          <td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>
  42
          <td>
  43
            <span v-if="e.job == 1">班主任</span>
  44
            <span v-else-if="e.job == 2">讲师</span>
  45
            <span v-else-if="e.job == 3">学工主管</span>
  46
            <span v-else-if="e.job == 4">教研主管</span>
  47
            <span v-else-if="e.job == 5">咨询师</span>
  48
            <span v-else>其他</span>
  49
          </td>
  50
          <td>{{e.entrydate}}</td>
  51
          <td>{{e.updatetime}}</td>
  52
          <td class="action-buttons">
  53
            <button type="button">编辑</button>
  54
            <button type="button">删除</button>
  55
          </td>
  56
        </tr>
  57
      </tbody>
  58
    </table>
  59
  </div>

  显示更多显示更少

  脚本部分：

  1
  <!-- Axios 是普通脚本（课程写法：放在模块脚本之前） -->
  2
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3
  <script type="module">
  4
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  5
  
  6
    createApp({
  7
      data() {
  8
        return {
  9
          searchForm: { name: '', gender: '', job: '' },   // 查询条件
  10
          empList: []                                      // 员工列表：先空着，等接口数据
  11
        }
  12
      },
  13
      methods: {
  14
        async search() {
  15
          try {
  16
            // ① 把条件拼到地址后面 ② await 等结果 ③ 取两层 data
  17
            let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
  18
            this.empList = result.data.data;   // 改数据 → 页面自动重新渲染
  19
          } catch (err) {
  20
            console.log(err);
  21
            alert('数据加载失败，请稍后重试');
  22
          }
  23
        },
  24
        clear() {
  25
          this.searchForm = { name: '', gender: '', job: '' };  // 清空条件
  26
          this.search();                                        // 清完重新查一次
  27
        }
  28
      },
  29
      // 生命周期钩子：页面加载完毕 → 自动查一次
  30
      mounted() {
  31
        this.search();
  32
      }
  33
    }).mount('#container')
  34
  </script>

  显示更多显示更少

  检查点：① 打开页面不用点按钮，表格里就是接口返回的数据（mounted 生效）；② 序号从 1 开始、性别”男/女”、职位是中文、头像正常显示；③ 姓名填”谢”点查询，表格只剩匹配的数据；④ 点”清空”，输入框变空且表格恢复全部数据；⑤ 把接口地址改错再刷新，弹出失败提示（try / catch 生效）而不是静默白屏；⑥ 对照课程 16. Vue-案例-员工列表(异步交互).html 逐段核对（课程代码里没有 try / catch，其余一致）。 说明：课程页面的头像是阿里云图床链接（现已失效返回 403），显示成破图不代表写错；想看得舒服就把 data 里 image 的值换成本地图片地址。