Vue3 基础超详细整理（下篇）

本文承接上篇 Vue 基础、六大指令内容，完整讲解 Ajax 概念、Axios 请求库、async/await 异步简化写法、Vue 八大生命周期钩子、页面自动加载员工列表综合实战，配套完整可运行代码、接口实战案例，适合零基础巩固、期末复习、前端入门面试。

一、Ajax 异步交互基础

1.1 Ajax 概念全称

Ajax = Asynchronous JavaScript And XML核心作用：不刷新整个页面，单独和服务交换数据，局部更新页面。典型场景：搜索下拉联想、用户名实时校验、后台表格查询，不用整页重载，体验更流畅。XML 是早期数据传输格式，现在项目全部使用 JSON 格式传输数据。

1.2 同步 vs 异步请求区别

同步请求发送请求后页面阻塞卡死，必须等后端返回数据才能继续操作页面，用户体验差，项目几乎不用。
异步请求发送接口的同时，页面可正常点击、输入；后端数据返回后自动更新页面指定区域，是前端标准交互方式。

1.3 原生 Ajax 缺陷

原生 JS 书写 Ajax 代码繁琐，需要处理请求头、状态码、异常等大量冗余代码，企业开发统一使用 Axios 封装库简化开发。

1.4 小节小结

Ajax 实现局部页面刷新，异步交互是页面主流；原生写法复杂，全部使用 Axios 发送请求。

二、Axios 请求库完整使用

2.1 Axios 介绍

专门封装 Ajax 的第三方库，简化 GET/POST 网络请求，内置成功、失败回调，官网：Axios中文文档 | Axios中文网

2.2 页面引入方式

复制代码

<!-- 在Vue容器上方引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.3 基础完整 Axios 写法

复制代码

axios({
  method: "GET", // 请求方式 GET查询 / POST新增修改
  url: "https://web-server.itheima.net/emps/list" // 后端接口地址
}).then((result) => {
  // 请求成功回调，result.data为后端返回数据
  console.log(result.data);
}).catch((err) => {
  // 请求失败回调（网络404/500、接口报错）
  alert("请求出错：" + err);
})

参数补充：

params：GET 请求拼接 url 参数 ?name=xx&gender=xx
data：POST 请求携带请求体参数

2.4 Axios 快捷别名（开发首选）

GET 查询列表 / 数据

axios.get("接口地址?参数").then(res=>{}).catch(err=>{})
POST 新增、编辑提交

axios.post("接口地址",提交数据).then(res=>{}).catch(err=>{})

2.5 async /await 简化异步代码

作用

替代多层 then 链式回调，代码写法同步化，可读性大幅提升。

使用规则

函数头部加async标识异步函数；
请求语句前加await，等待接口返回结果再向下执行；
await 只能写在 async 函数内部。

Vue methods 实战示例

复制代码

methods: {
  // 异步查询员工
  async searchEmp() {
    // 等待接口返回数据
    let res = await axios.get("https://web-server.itheima.net/emps/list");
    // 将后端列表赋值给页面渲染数组
    this.userList = res.data.data;
  }
}

2.6 小节小结

Axios 简化网络请求，async+await 消除回调地狱，是 Vue 项目接口标准写法。

三、Vue 生命周期（生命周期钩子）

3.1 生命周期定义

Vue 实例从创建、初始化、挂载、数据更新、销毁完整全过程；每个固定阶段自动触发对应钩子函数，开发者可在钩子内编写业务逻辑。

3.2 八大完整生命周期钩子对照表

钩子函数	执行时机	核心业务场景
beforeCreate	实例刚创建，data 数据未初始化	极少使用
created	数据初始化完成，DOM 还未生成	预处理初始数据
beforeMount	DOM 挂载渲染之前	DOM 前置操作
mounted	页面 DOM 渲染挂载完成	页面加载自动请求后端接口（最常用）
beforeUpdate	data 数据变化，页面刷新前	对比新旧 DOM
updated	页面重新渲染完毕	刷新后 DOM 操作
beforeUnmount	组件 / 页面销毁前	清除定时器、监听事件
unmounted	完全销毁释放资源	清理残留占用

3.3 核心实战：mounted 自动加载数据

需求：页面一打开，不用点击查询，自动请求后端员工接口渲染表格

复制代码

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
  data() {
    return {
      searchForm: {name:"",gender:"",job:""},
      userList: [] // 员工列表
    }
  },
  // 页面挂载完毕自动执行
  mounted() {
    this.searchEmp()
  },
  methods: {
    async searchEmp(){
      // 拼接搜索条件参数
      let url = `https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`
      let res = await axios.get(url)
      this.userList = res.data.data
    }
  }
}).mount("#app")
</script>

3.4 小节小结

mounted 是开发使用频率最高钩子，页面初始化加载列表全部写在 mounted 内部。

四、综合实战：员工管理完整页面

4.1 页面整体功能

顶部搜索表单：姓名、性别、职位输入框，查询 / 清空按钮；
下方员工表格：序号、头像、姓名、性别、职位、入职时间、操作；
页面打开自动加载全部员工；
点击查询携带条件筛选列表；
v-for 循环渲染、v-if 区分男女、v-bind 渲染头像。

4.2 后端接口地址

复制代码

https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx

4.3 完整页面结构说明

搜索区域：v-model 绑定 searchForm 表单对象，查询按钮绑定 searchEmp 方法；
表格区域：tr 使用 v-for 循环 userList，:key 绑定员工唯一 id；
性别列：v-if/v-else 判断 1 男 2 女；
头像 img：:src 动态绑定图片路径；
页面初始化 mounted 自动调用查询方法。

五、下篇全文总结

Ajax：无刷新局部更新页面，异步交互提升用户体验；
Axios：封装 Ajax 库，分 GET/POST 请求，async+await 简化异步代码；
Vue 八大生命周期钩子，mounted 页面加载完成自动请求数据；
综合员工案例融合 v-for/v-if/v-model/v-on/ 网络请求全套知识点；
接口携带 URL 参数实现条件筛选表格数据。

下篇拓展练习

独立完成完整员工管理页面，页面打开自动加载数据；
完善查询功能，输入关键词后筛选对应员工；
练习 async/await 改造 axios，对比原生 then 写法区别；
在 mounted、created 分别打印日志，观察钩子执行顺序。

下篇面试高频考点

Ajax 异步作用，同步异步区别；
Axios GET/POST 使用场景，async/await 作用；
Vue 八大生命周期，mounted 使用场景；
为什么页面初始化请求接口写在 mounted 而不是 created；
Axios 请求携带查询参数的写法。