Axios 和 生命周期

vue 更新DOM是异步的

axios是一个专门用于发送ajax请求的库

特点

* 支持客户端发送Ajax请求
* 支持服务端Node.js发送请求
* 支持Promise相关用法
* 支持请求和响应的拦截器功能
* 自动转换JSON数据
* axios 底层还是原生js实现, 内部通过Promise封装的 ，promise解决异步回调问题

原理

* 浏览器window接口的XMLHttpRequest

传参

在url？拼接 - 查询字符串
在url路径 - 需要后端特殊处理
在请求体/请求头 传参给后台

设置全局配置
axios.defaults.baseURL = "URL路径前置"
给Vue构造函数的原型添加axios
Vue.prototype.$axios = axios

axios的基本使用
this.$axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
       xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

可以再created生命周期函数中发起Ajax请求

$refs-获取DOM
> 目标: 利用 ref 和 $refs 可以用于获取 dom 元素
通过id / ref, 都可以获取原生DOM标签

### $refs-获取组件对象

> 目标: 获取组件对象, 调用组件里方法
 console.log(this.$refs.count.fn);

### vue更新DOM是异步的
获取dom异步更新后的结果
this.$nextTick(() => {
                console.log(this.$refs.count.innerHTML);
            })

###  $nextTick() 使用场景
focus() 输入框获焦点

### 组件name属性使用

> 目标: 可以用组件的name属性值, 来注册组件名字
子组件内name:'自定义名字'
父组件内[组件名.name]：'组件名'

对props的变量值，进行校验
props:{
  变量名：{
type--约束值的类型
default--设置默认值
required:true --  设置为必须值
     }
}

事件改变用监听watch，可以设置监听条件进行限制

初始化阶段含义讲解:

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选项

挂载阶段含义讲解:

6.template选项检查

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

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

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

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

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

10.真实DOM挂载完毕

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

更新阶段含义讲解:

12.当data里数据改变, 更新DOM之前

13.beforeUpdate – 生命周期钩子函数被执行

14.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

15.updated – 生命周期钩子函数被执行

16.当有data数据改变 – 重复这个循环

销毁阶段含义讲解:

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

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

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

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

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