vue的生命周期和axios的使用

1. vue生命周期

1.0_人的-生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IooACeQ4-1672244025799)(images/image-20210111193143574.png)]

Vue_生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPpRPvVI-1672244025800)(images/image-20210511152835915.png)]

1.1_钩子函数

目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

• 初始化
• 挂载
• 更新
• 销毁

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

官网文档

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1x8IpnM-1672244025800)(images/Day03.png)]

1.2_初始化阶段

目标: 掌握初始化阶段2个钩子函数作用和执行时机

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

​ 没有. 调用$mount()方法

​ 有, 继续检查template选项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHOklsKH-1672244025801)(images/image-20210511153050932.png)]

components/Life.vue - 创建一个文件

<script>
export default {
     
    data(){
     
        return {
     
            msg: "hello, Vue"
        }
    },
    // 一. 初始化
    // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
    beforeCreate(){
     
        console.log("beforeCreate -- 执行");
        console.log(this.msg); // undefined
    },
    // data和methods初始化以后
    // 场景: 网络请求, 注册全局事件
    created(){
     
        console.log("created -- 执行");
        console.log(this.msg); // hello, Vue

        this.timer = setInterval(() => {
     
            console.log("哈哈哈");
        }, 1000)
    }
}
</script>

App.vue - 引入使用

<template>
  <div>
    <h1>1. 生命周期</h1>
 	<Life></Life>
  </div>
</template>

<script>
import Life from &