一.axios

每种框架或函数库中都提供了专门的发送ajax请求的函数,用哪个框架,就要使用对应的哪种ajax函数比如:jquery:$.ajax() vue:axios.get()

1.什么是axios

axios是基于Promise技术的,专门发送ajax请求的函数库--几乎专与vue,但是其他框架也可使用

2.如何使用

   (1).引入axios.js,获得axios对象
   (2).因为大部分服务器的域名和端口号部分都是一致的,只有服务器接口地址的相对路径部分不一致,所以axios允许先统一配置所有请求的基础路径
       axios.defaults.baseURL="服务器端口的统一基础路径"
    (3).发送get请求:
       axios.get("/接口相对路径",{
          params:{请求参数1:值1,请求参数2:值2..}
       }).then(result=>{
          //成功收到响应结果后,自动执行.then中的箭头函数
          //result并不是直接返回结果
          //result.data 才是返回结果!
          //且返回结果已经被自动转为js数组或对象了
       })
       结果:服务器接口地址?请求参数1=值1&请求参数2=值2&....
    (4).发送post请求:
    axios.post("/接口相对路径","请求参数1=值1&请求参数2=值2&...")
    .then(result=>{
       result.data 服务器响应结果
    })

二.生命周期

1.问题:

dom中和jquery中,都有页面加载完成事件可以在页面加载完成后自动执行一些页面初始化操作(发送ajax请求以及事件绑定),但是DOM中的window.onload和jquery中的$(function(){...})都不属于vue,规定:所有的js代码,都要写在new Vue()对象内部,new Vue()对象之外不应该有任何代码!

2.何时使用生命周期:

在Vue中也想在页面加载后自动执行一些初始化操作时,都要用生命周期来做.

3.什么是生命周期:

指一个Vue对象从创建到渲染出来让人看到所经理的整个过程好像小学->中学->高中->大学...这样一个过程

4. 生命周期4个阶段

一个Vue对象从创建到渲染出来,共可能经历4个阶段

   (1).创建(create):--必经阶段
   a.创建new Vue对象,引入data对象,并请保镖
   b.暂时没有虚拟DOM树
   (2)挂载(mount):--必经阶段
   a.生成虚拟DOM树
   b.首次渲染页面内容
   (3).更新(update):--只有data的变量被更改时,才触发更新阶段
   (4).销毁(destroy):--只有调用$destroy()函数,销毁当前组件时,才触发销毁阶段

5.生命周期钩子函数

如果希望在某个生命周期阶段自动执行一件事,还必须使用生命周期钩子函数

(1).什么是生命周期钩子函数

在vue对象创建到每个阶段时,自动调用的一种回调函数

(2).Vue对象加载过程

Vue对象加载过程中,共经历8个生命周期钩子函数(每个生命周期阶段前后各有一个钩子函数)

         beforeCreate(){...}
      a.创建阶段(create)
          created(){...}
          beforeMount(){...}
      b.挂载阶段(mount)
          mounted(){...}
          beforeUpdate(){...}
      c.更新阶段(update)
          updated(){...}
          beforeDestroy(){....}
      d.销毁阶段(destroy)
          destroyed(){...}

6.发送ajax请求的代码应该放在?

(1)不能放在update阶段

因为update阶段不是必经阶段,不一定总是执行,必须修改data中的变量才触发,如果不修改data中的变量是不会触发的,所以放在update中的代码,在页面首次加载时,无法自动执行!

(2)可以放在created()中,但是不保险

  a.created()执行时,data对象已经有了,axios请求回来的结果,就可以放入data对象中 
  b.不保险:created()执行时,暂时还没有虚拟DOM树,可能无法完成一些DOM相关的操作

(3).最好的做法放在mounted()

此时既有了data对象,可保存axios请求回来的数据,又有了虚拟DOM树,也可以执行一些DOM相关的操作