vue2中的生命周期

vue2的官方文档：v2.cn.vuejs.org/v2/guide/

1.vue2的生命周期有哪些？

创建前、后 beforeCreate created
beforeCreate===>没有data，没有el
created===>有data，没有el

挂载前、后 beforeMount mounted
beforeMount===>有data，没有el(其实已经在准备了)
mounted===>有data，有el

修改前、后 beforeUpdate updated

销毁前、后 beforeDestory destoryed

2.第一次进入到页面（组件），会执行哪些生命周期?

beforeCreate | created | beforeMount | mounted

3.一些vue的api

this.$data，就是当前组件的data数据
this.$el，就是当前组件的节点（DOM）

4.什么时候使用哪些生命周期

created===>请求接口
mounted===>dom操作时
updated===>观测数据是否更新
destoryed===>当用户关闭页面，但是业务上要记录一些东西的时候

5.原理

我们知道生命周期是从new Vue开始的，也就是说这个new Vue是个构造函数
es6中的class类详见es6笔记

data的实现原理

class Vue{
    constructor(options){
        // options等价于new Vue中的{data:{str:'你好'}}
        this.$data = options.data
        console.log(this.$data) //{str:'你好'}
    }
}
new Vue({
    data:{
        str:'你好'
    },
    beforeCreate(){
        console.log(this.$data) //undefined
        /*
            现在这里的$data是没有的，但是我们可以更改这个this的指向
            在class Vue中
            options.beforeCreate.bind(this)()
            此时这里的console.log(this.$data)就有了
        */
    }
})

6.axios请求数据

在vue项目中，一般使用axios、fetch来发起请求
安装axios: npm install axios -S
在created中发起请求，axios返回的是一个promise
把请求到的数据渲染到页面上

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.imageUrl" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    axios({
      url: "http://testapi.xuexiluxian.cn/api/slider/getSliders",
    }).then((res) => {
      this.list = res.data.data.list;
      console.log(res.data.data.list);
    });
  },
};
</script>

6.1.请求跨域问题

详解：www.bilibili.com/video/BV1oa… p3的6min

6.2.axios二次封装

axios的基础应用

axios中文文档 www.axios-http.cn/docs/intro
基本写法 axios.post() axios.get() axios({url:''})

created(){
    axios.get('url?参数1&参数2&...')
    })
    axios.post('url',{
        参数1:xxx ,
        参数2:xxx
        ...
    })
    axios({
        url:'',
        method:'get/post', //默认是get
        headers:{}, //自定义请求头，一般会传递一些token
        data:{},  //post请求，前端给后端传递的参数
        params:{}  //get请求，前端给后端传递的参数
        
        
    })
}

axios的二次封装

src/util/request.js
import axios from 'axios'
----------------------------------------------------------
//1.创建axios对象
const instance = axios.create({ 
    baseURL: 'https://some-domain.com/api/', 
    timeout: 1000, 
});
----------------------------------------------------------
// 2.添加请求拦截器（前端给后端的参数） 
axios.interceptors.request.use(function (config) { 
    // 在发送请求之前做些什么 
    //登录的判断,会在headers中把用户的token传递给后端
    if(xxx){
        instance.headers.token = xxx
    }
    return config; 
}, 
function (error) { 
    // 对请求错误做些什么 return Promise.reject(error); 
}); 
----------------------------------------------------------
// 3.添加响应拦截器 （后端返回给前端的数据）
//后端给前端数据时会有code码,code == 1/2/xxx时代表响应成功
axios.interceptors.response.use(function (response) { 
    // 2xx 范围内的状态码都会触发该函数。 
    // 对响应数据做点什么 
    return response; 
}, function (error) { 
    // 超出 2xx 范围的状态码都会触发该函数。 
    // 对响应错误做点什么 
    return Promise.reject(error); 
});
----------------------------------------------------------
//最终返回的axios对象
export default instance;

7.api解耦

为了一个接口能多次使用，如果我们把它封装起来就能实现
为了方便api请求的统一管理

----------------------------------------------------------
//未封装时
export default {
    created(){
        request({
            url:'xxx/xxx/ABC',
            params:{}
        }).then(res => {
            console.log(res)
        })
    }
}
----------------------------------------------------------
//封装后
src/api/course.js
import request from 'xx/xx/request.js'
export default function ABC(){
    return request({
        url:'xxx/xxx/ABC'
    })
}

//在vue中使用
import { ABC } from 'xx/api/cpurse.js'
export default {
    created(){
       ABC().then(res => {
           console.log(res)
       })
    }
}