一、使用Axios动态加载员工列表数据
1、运行页面效果
2、单击查询显示所有的数据
3、 再通过姓名，性别，职位分别查询数据
4、单击清空按钮，查询字段恢复原来状态，那就是显示所有的数据
5、JS代码片段
<!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
findForm: {
name: '',
gender: '',
position: ''
},
users: [] // 用于存储查询结果的用户数据数组
};
},
methods: {
showMessage() {
// 这里可以添加实际的查询逻辑
axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
.then(response => {
this.users = response.data.data;
})
.catch(error => {
console.error('查询用户数据失败:', error);
})
},
// 清空查询表单
clearForm() {
this.findForm = {
name: '',
gender: '',
position: '',
}
this.showMessage(); // 清空后重新查询，获取所有用户数据
}
}
}).mount('#app');
</script>
说明：使用axios中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。
解决：可以通过async、await可以让异步变为同步操作
async：声明一个异步方法，await：等待异步任务执行。
如下操作：（代码修改后就变成同步操作了，也就是从前往后一行一行执行。）
methods: {
async showMessage() {
// 这里可以添加实际的查询逻辑
let response= await axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
this.users = response.data.data;
},注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值
二、Vue生命周期
1、它是vue对象从创建到销毁的过程
2、它的8个阶段：
每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
| 生命周期阶段 | 钩子函数 | 触发时机 | 典型应用场景 |
|---|---|---|---|
| 创建阶段 | beforeCreate | 实例初始化后，数据观测/事件配置前 | 插件初始化、非响应式变量设置 |
| created | 实例创建完成（数据观测/方法可用，DOM未生成） | 异步请求数据、初始化非DOM相关操作 | |
| 挂载阶段 | beforeMount | 模板编译完成，虚拟DOM已创建但未渲染 | 最后修改渲染数据（不会触发重新渲染） |
| mounted | 实例挂载到真实DOM后 | 操作真实DOM、初始化第三方库（如ECharts） | |
| 更新阶段 | beforeUpdate | 数据变化后，虚拟DOM重新渲染前 | 获取更新前的DOM状态（慎改数据） |
| updated | 虚拟DOM重新渲染并应用更新后 | 依赖新DOM的操作（如调整插件尺寸） | |
| 销毁阶段 | beforeDestroy | 实例销毁前（仍完整可用） | 清除定时器、解绑事件、销毁全局监听 |
| destroyed | 实例销毁后（所有绑定和子实例已移除） | 释放非Vue管理的资源（如手动创建的DOM事件） |
生命周期图示：
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
一般用于页面初始化自动的ajax请求后台数据
如果想在页面加载完毕，就能列出所有员工数据，就可以在mounted钩子函数中，发送异步请求查询员工数据了。
methods: {
async showMessage() {
// 这里可以添加实际的查询逻辑
let response= await axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
this.users = response.data.data;
},
// 清空查询表单
clearForm() {
this.findForm = {
name: '',
gender: '',
position: '',
}
this.showMessage(); // 清空后重新查询，获取所有用户数据
}
},
mounted() {
this.showMessage(); // 页面加载完成后，自动查询所有用户数据
}运行：
