Vue生命周期axios用于前后端的请求库

生命周期

生命周期概念：vue 实例从创建到销毁的过程就是生命周期。

钩子（内置）函数

作用：特定时间点，咨询待定的操作

场景：组件创建完毕后，可以在created生命周期函数中发起ajax请求，从而初始化data

分类

4大阶段8个方法

Vue官网（https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA）

生命周期图示

1、初始化阶段

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

没有. 调用$mount()方法

有, 继续检查template选项

 

components/Life.vue

 1

App.vue

 1 
 7 
 8

2、挂载阶段

含义讲解:

1.template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

components/Life.vue

 1 
 7 
 8

4、销毁阶段

含义讲解:

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

 components/Life.vue

 1

App.vue

- 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

 1   if="show">
 2   
 3   ?
 4   
 1 if="show">
 2 
 3 
 4

axios

axios基本使用

特点：

  • 支持客户端发送Ajax请求

  • 支持服务端Node.js发送请求

  • 支持Promise相关用法

  • 支持请求和响应的拦截器功能

  • 自动转换JSON数据

  • axios 底层还是原生js实现, 内部通过Promise封装的

  基本使用 

 1 axios({
 2   method: '请求方式', // get post
 3   url: '请求地址',
 4   data: {    // 拼接到请求体的参数,  post请求的参数
 5     xxx: xxx,
 6   },
 7   params: {  // 拼接到请求行的参数, get请求的参数
 8        xxx: xxx 
 9   }
10 }).then(res => {
11   console.log(res.data) // 后台返回的结果
12 }).catch(err => {
13   console.log(err) // 后台报错返回
14 })

axios基本使用-获取数据

 1 
 7 
 8