Vue-生命周期的使用
人的生命周期
一组件从 创建 到 销毁 的整个过程就是生命周期
Vue 的生命周期
2.Vue-钩子函数
目标
Vue 框架内置函数，随着组件的生命周期阶段，自动执行
讲解
作用: 特定的时间点，执行特定的操作
场景: 组件创建完毕后，可以在 created 生命周期函数中发起 Ajax 请求，从而初始化 data 数据
分类: 4 大阶段 8 个方法
- 初始化
- 挂载
- 更新
- 销毁
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
3.Vue-初始化阶段
beforeCreate
create - 在此处访问 data 和 methods 等
4.Vue-挂载阶段
beforeMount
mount - 在此处获取真实 ＤＯＭ 元素
5.Vue-更新阶段
beforeUpdate
updated - 在此处获取更新后的真实 DOM 元素
6.Vue-销毁阶段
beforeDestroy
destoryed - 一般用于清除定时器和全局事件
7.axios-基本使用
目标
了解什么是 axios, 以及如何使用
讲解
特点
- 支持客户端发送 Ajax 请求
- 支持服务端 Node.js 发送请求
- 支持 Promise 相关用法
- 支持请求和响应的拦截器功能
- 自动转换 JSON 数据
- axios 底层还是原生 js 实现, 内部通过 Promise 封装的
全局配置
-
axios.defaults.baseURL
- 配置全局默认的基地址
axios 的基本使用
axios({
method: "请求方式", // get post
url: "请求地址",
data: {
// 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: {
// 拼接到请求行的参数, get请求的参数
xxx: xxx,
},
})
.then((res) => {
console.log(res.data); // 后台返回的结果
})
.catch((err) => {
console.log(err); // 后台报错返回
});
小结
-
什么是 ajax?
一种前端异步请求后端的技术
-
ajax 原理?
浏览器 window 接口的 XMLHttpRequest
-
axios 是什么?
基于原生 ajax+Promise 技术封装通用于前后端的请求库
props 类型检测
props: {
接收的变量: {
type: 类型,
default: 默认值,
required: 必选项
}
}
今日总结
Vue 的生命周期哪 4 个阶段, 哪 8 个方法
axios 是什么, 底层是什么, 具体如何使用
axios 返回的是什么, 如何接收结果
