◆ Vue生命周期
Vue_生命周期
从
创建
到
销毁
的整个过程就是 – Vue实例的 - 生命周期
![](https://i-blog.csdnimg.cn/blog_migrate/56579eaf72972365068cb7bebbb3ab2d.png)
Vue的生命周期是什么?
从Vue实例, 创建到销毁的过程
钩子函数
Vue 框架内置函数,随着组件的生命周期阶段,自动执行
作用: 特定的时间点,执行特定的操作
场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据
分类: 4大阶段8个方法
初始化
beforeCreate
created
挂载
beforeMount
mounted
更新
beforeUpdate
updated
销毁
beforeDestroy
destroyed
![](https://i-blog.csdnimg.cn/blog_migrate/2f47b7c85fcd12128b600afda198229d.png)
如何知道Vue生命周期到达了什么阶段?
使用钩子函数
钩子函数有哪些?
初始化 / 挂载 / 更新 / 销毁
初始化
![](https://i-blog.csdnimg.cn/blog_migrate/64b83198ae88ff16ae83943b29076c8c.png)
Vue实例从创建到编译模板执行了哪些钩子函数?
beforeCreate / created
created函数触发能获取data?
能获取data, 不能获取真实DOM
挂载
![](https://i-blog.csdnimg.cn/blog_migrate/1eefc5e259eebe8a965499d686d00d24.png)
Vue实例从创建到显示都经历了哪些钩子函数?
beforeCreate / created / beforeMount / mounted
created函数里, 能获取真实DOM吗?
不能获取真实DOM
在什么钩子函数里可以获取真实DOM?
mounted
更新
什么时候执行updated钩子函数
当数据发生变化并更新页面后
在哪可以获取更新后的DOM
在updated钩子函数里
销毁
![](https://i-blog.csdnimg.cn/blog_migrate/52017cedaacc46bf8a7d311898e683da.png)
一般在beforeDestroy/destroyed里做什么?
手动消除计时器/定时器/全局事件
◆ axios使用
axios 是一个专门用于发送ajax请求的库
官网:
http://www.axios-js.com/
特点
支持客户端发送Ajax请求
支持服务端Node.js发送请求
支持Promise相关用法
支持请求和响应的拦截器功能
自动转换JSON数据
axios 底层还是原生js实现, 内部通过Promise封装的
![](https://i-blog.csdnimg.cn/blog_migrate/834b7b89e9d7abb9692edb9738996c0c.png)
什么是ajax?
一种前端异步请求后端的技术
ajax原理?
浏览器window接口的XMLHttpRequest
axios是什么?
基于原生ajax+Promise技术封装通用于前后端的请求库
使用axios获取数据
![](https://i-blog.csdnimg.cn/blog_migrate/297f70a9b0d26c18f9d2883c5efc4529.png)
axios如何发起一次get请求?
在method选项配置为true / 也可以默认不写
axios函数调用原地结果是什么?
是一个Promise对象
如何拿到Promise里ajax的成功或失败的结果?
then() / catch()
使用axios传参
![](https://i-blog.csdnimg.cn/blog_migrate/cd290210cbd6d7fd4d91635eba71a9a6.png)
ajax如何给后台传参?
在url?拼接 – 查询字符串
在url路径上 – 需要后端特殊处理
在请求体 / 请求头 传参给后台
axios哪个配置项会把参数自动写到url?后面
params
axios使用 发布书籍
![](https://i-blog.csdnimg.cn/blog_migrate/8cf42242f5caa535aaa3387e2d6627b9.png)
post请求方式, 一般在哪里传递数据给后台?
请求体中
axios哪个选项, 可以把参数自动装入到请求体中?
data选项
axios默认发给后台请求体数据格式是?
json字符串格式
axios全局配置
配置基础地址, 统一管理
![](https://i-blog.csdnimg.cn/blog_migrate/4654e28b5595d70d5b3d818cd2f064ce.png)
想学习axios更多的知识应该去哪里?
官网多阅读, 多看多总结, 任何库和插件都是
axios如何配置基地址?
axios.defaults.baseURL
◆ $refs和$nextTick使用
获取DOM
通过id或ref属性获取原生DOM
![](https://i-blog.csdnimg.cn/blog_migrate/5f1051abdeb7636a114a93911097d047.png)
Vue中如何获取原生DOM呢?
用id属性或者ref属性都可以
获取组件对象
通过ref属性获取组件对象
![](https://i-blog.csdnimg.cn/blog_migrate/d07c5433d9b0f2ea751e4ef1545e1328.png)
如何获取组件对象呢?
目标组件添加ref属性
this.$refs.名字 获取组件对象
拿到组件对象能做什么?
调用组件里的属性/方法
$nextTick使用
等DOM更新后, 触发此方法里函数体执行
语法: this.$nextTick(函数体)
data改变更新DOM是同步还是异步的?
异步
我们可以在哪里访问到更新后的DOM呢?
this.$nextTick里的函数体
updated生命周期钩子函数
组件name属性使用
组件name可用作注册组件名字
总结
![](https://i-blog.csdnimg.cn/blog_migrate/93abc37732d45270429446e1fb019277.png)
组件使用分为几步?
创建组件 / 引入组件 / 注册组件 / 使用组件
注册组件名还可以用什么?
用组件对象的name属性的值
◆ 购物车案例
组件文件结构
App.vue
MyHead.vue
MyGoods.vue
MyFooter.vue
MyConent.vue