axios、生命周期的基本属性

axios
axios官网文档

axios是一套对ajax的封装的JS库，本质上用的还是XMLHttpRequest，只不过它是用promise进行的封装所以它就有.then和.catch方法

axios是基于promise封装的，所以用起来方便，避免了回调地狱

缺点：浏览器兼容性不好(技术太先进了)

与jquery对比
jQuery与axios对比 jQuery axios
1.ajax技术底层原理 XMLHTTPRequest XMLHTTPRequest
2.体积大小 大（包含大量dom操作与ajax） 小(只有ajax请求)
3.是否支持ES6的Promise 不支持（底层使用其他方案模拟实现） 支持基于原生Promise封装
4.兼容性 好 （兼容性是jQuery的强项） 一般(使用了新技术)
axios发get请求
get方法第一个参数是url
get方法第二个参数是对象类型 { params:{get参数对象} }

get() : 写url和请求参数
then(res=>{}) : 成功回调， 相当于以前jq的success
catch(err=>{}):失败回调， 一般可以省略不写
then(()=>{}):完成回调， 表示请求完成，无论成功失败都会执行。一般可以省略不写
axios发post请求
post方法第一个参数是url
post方法第二个参数是对象类型 { post参数对象 }
post请求传参数，直接在第二个参数里写就行了

axios配置模式
和$.ajax()非常类似
不同之处是使用promise技术处理异步操作结果
axios({
url:‘请求路径’,
method:‘请求方式’,
data:{ post请求参数 },
params:{ get请求参数 }
}).then(res=>{
//成功回调
//console.log(res)
});

生命周期基本介绍
官网文档

vue生命周期钩子介绍

钩子 ： 回调函数
例如
window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }
生命周期 ： vue实例从出生到死亡的过程
出生：
创建vue实例
创建data数据
创建el挂载点
将data数据渲染到el挂载点
死亡
vue实例被销毁
这里销毁不是指vue实例变成了null，而是指解除data与el的关联
说人话：修改了data，页面不会被渲染
注意点

根据官网文档介绍 ： 每一个生命周期钩子中的this都是指向vue实例
所以，生命周期钩子不能是箭头函数
执行顺序 钩子函数 执行时机
1 beforeCreate(){} vue实例创建了，但是el和data还没有创建 （准备创建data）
2 created() {} data数据创建了，但是el挂载点还没有创建 (准备创建el)
3 beforeMount() {} el挂载点创建了，但是data数据还没有渲染（准备渲染中）
4 mounted() {} data数据 第一次 渲染完毕 (完成初始渲染)
5 beforeUpdate() {} 检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6 updated() {} 变化后的data数据 ，完成渲染到页面 （完成重新渲染）会执行多次
7 beforeDestroy() {} vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染
8 destroyed() {} vue实例已经销毁

计算属性
依赖一个或者多个数据而生成一个新的数据时，考虑用计算属性

vue计算属性官方文档

计算属性作用 ： 解决渲染数据的代码冗余问题
某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理
计算属性的语法：在vue实例的computed对象中声明一个函数
这个函数名就是计算属性的属性名
在这个函数中 return 返回值（是计算属性的属性值）
注意点
这个函数一定要写在vue实例的computed对象中
这个函数一定要有返回值，否则计算属性无法渲染
应用场景：购物车

<div class="cart">
    <div v-for="item in goods">
      <span>{{ item.name }}</span>
      <span>价格：{{ item.price }}</span>
      <button @click="item.count--">-</button>
      <input type="text" v-model="item.count">
      <button @click="item.count++">+</button>
    </div>

    <div>
      总价：{{ totalPrice }}
    </div>
</div>