[JavaScript知识库] 【vue】vue中axios的使用及vue生命周期详解

1. 问题: 首先, ajax 4步非常繁琐；其次jquery中虽然提供了$.ajax()函数，但是仅限于jquery中使用！那么到了vue中，如何一句话发送ajax请求?

3. 什么是axios: 第三方开发的专门发送ajax请求的基于Promise的函数库。

???????? axios.defaults.baseURL="http://服务器端所有接口的基础地址"

???????? }).then(result=>{//坑1: 必须用箭头函数！ ?只有result一个参数，则省略()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/axios.min.js"></script>
</head>
<body>
  <script>
    //0. 配置统一的基础路径
    axios.defaults.baseURL="http://xzserver.applinzi.com";
    //1. 去东哥新浪云服务器获取学子商城首页商品列表
    axios.get("/index").then(result=>{
      console.log(result.data);
    })
    //2. 去东哥新浪云服务器获取5号商品的详细信息
    axios.get("/details",{
      params:{
        lid:5
      }
    }).then(result=>{
      console.log(result.data);
    })
    //3. 去东哥服务器验证用户名和密码，登录
    axios.post(
      "/users/signin",
      "uname=dingding&upwd=123456"
    ).then(result=>{
      console.log(result.data);
    })
  </script>
</body>
</html>

二. 生命周期

1. 问题: 在DOM或jq中，如果希望在页面加载后就自动执行一项任务(发送ajax请求)，可以写在window.onload或$(function(){ ... })中。但是，vue项目中写哪儿呢？

2. 解决: 今后只要在vue中希望页面加载后自动执行一项任务，都要将代码写在vue对象的生命周期中。

3. 什么是生命周期: new Vue()对象创建过程中所经历的所有阶段。

???????? 只有在data中的变量被修改时，且这个修改会影响到界面时，才自动触发！

???????? 只有在主动调用$destroy()函数，释放当前new Vue()对象或组件时才自动触发！

?????????????????????????????????? //已经创建完data对象，可以对data中的变量执行操作。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //但是暂时还没有虚拟DOM树，所以暂时不能操作页面上的元素！——如果操作，也会丢失！因为后续mount会将我们的修改尽数覆盖！

?????????????????????????????????? //又有虚拟DOM树，可以执行部分DOM操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(p,i) of products">
          {{p.pid}} || {{p.title}} || {{p.price}}
        </li>
      </ul>
    </div>
    <script>
      //所以代码一律放在new Vue()内部！
      var vm = new Vue({
        el: "#app",
        data: {
          products: [],
        },
        beforeCreate() {
          console.log(`创建data之前自动执行...`);
        },
        created() {
          console.log(`创建data之后自动执行...`);
        },
        beforeMount() {
          console.log(`挂载页面之前自动执行...`);
        },
        mounted() {
          //生命周期钩子函数
          //this->new Vue()
          //this.变量
          console.log(`挂载页面之后自动执行...`);
          axios
            .get("http://xzserver.applinzi.com/index")
            // .then(function(result){//错误
            // //普通回调函数中的this->window
            // //this.products -> window.products
            .then((result) => {
              //内部的this->外部mounted()的this->new Vue()
              this.products = result.data;
            });
        },
        beforeUpdate() {
          console.log(`更新前自动执行...`);
        },
        updated() {
          console.log(`更新后自动执行...`);
        },
        beforeDestroy() {
          console.log(`销毁前自动执行...`);
        },
        destroyed() {
          console.log(`销毁后自动执行...`);
        },
      });
    </script>
  </body>
</html

💥 扩展：this判断—8种指向

this ?8种指向: 判断this，~~一定不要看定义在哪儿！~~只看调用时！

?? 2. fun() 或 (function(){ ... })() 或多数回调函数或定时器函数?? this->window

?? 4. 类型名.prototype.共有方法=function(){ ... }?? this->将来谁调用指谁，同第一种情况

?? 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果需要使用简化版函数，必须$(this)

?? 7. jQuery.fn.自定义函数=function(){ ... }?? this->将来调用这个自定义函数的.前的jQuery子对象，~~不用再$(this)~~

? 总结：知识点提炼

???????? 变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

? ??通常是<div id="app">
? b. 可能变化的元素内容用{{自定义变量名}}标记

(4). 控制两个元素二选一显示: ?v-if? v-else //使用删除元素方式隐藏元素

(6). 只要反复生成多个相同结构的元素组成列表时: v-for ?:key="唯一标识"

强调: 为什么必须加:key="i"？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。

(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once

7. 只要希望在页面加载时自动对元素执行一些初始化操作时就用自定义指令:

8. 今后只要根据其他变量的值动态计算出一个属性值就用计算属性:

9. 希望将变量的原始值先加工后再显示给用户看时就用过滤器:

强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象