Vue生命周期与Axios

1、生命周期钩子

生命周期就是组件或者实例，从创建到被销毁（初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载）的一系列过程，我们称这是Vue的生命周期.

(1) 创建

    beforeCreate() 
    created()       // 最早拿到数据的生命周期
1
2

Created() 详细：
在这个阶段，可以访问到数据，但是页面当中真实dom节点还是没有渲染出来，在这个钩子函数里面，可以进行【相关初始化事件的绑定】

(2) 挂载

    beforeMount()  // 最早拿到页面模板的生命周期
    mounted() 
1
2

beforeMount()详细：
代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来，这个钩子函数与【created钩子函数】用法基本一致，可以进行【相关初始化事件的绑定、发送ajax操作】

(3) 更新

    beforeUpdate() 
    updated() 
1
2

(4) 销毁/卸载

    beforeDestroy() 
    destroyed() 
1
2

beforeDestroy() 详细：

​ 当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作,可以【清除一些初始化事件】、【定时器相关的东西】。

2、axios的使用

axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。以下仅介绍【如何使用】

(1) promise方式

    axios.get("http://localhost:52330/vue/day04/db.json").then(res => {
        // console.log(res);
        this.arr = res.data.arr
    }).catch(err => {
        console.log(err);
    })
1
2
3
4
5
6

(2) async与await方式

    async getMsg(){
        try {
            let res = await axios.get("http://localhost:52330/vue/day04/db.json")
            this.arr = res.data.arr
        } catch (error) {
            console.log(error);
        }
    }
1
2
3
4
5
6
7
8