Vue-生命周期-axios_vue生命周期发送axios请求

一.vue生命周期：

**从创建 **到 销毁 的整个过程就是 – Vue实例的 - 生命周期

1.钩子函数

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

• 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
• 4大阶段8个方法
• 初始化
• 挂载
• 更新
• 销毁

2.初始化阶段

初始化阶段2个钩子函数作用和执行时机

• Vue() – Vue实例化(组件也是一个小的Vue实例)
• Events & Lifecycle – 初始化事件和生命周期函数
• injections&reactivity – Vue内部添加data和methods等
• created – 生命周期钩子函数被执行, 实例创建
• 接下来是编译模板阶段 –开始分析
• Has el option? – 是否有el选项 – 检查要挂到哪里
  • 没有. 调用$mount()方法
  • 有, 继续检查template选项

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

App.vue - 引入使用

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

<script>
import Life from './components/Life'
export default {
   
  components: {
   
    Life
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.挂载阶段

挂载阶段2个钩子函数作用和执行时机 不能获取真实DOM

1.template选项检查

• 有 - 编译template返回render渲染函数

• 无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

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

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{
  { msg }}</p>
  </div>
</template>

<script>
export default {
    // ...省略其他代码
    
    // 二. 挂载
    // 真实DOM挂载之前
    // 场景: 预处理data, 不会触发updated钩子函数
    beforeMount(){
        console.log("beforeMount -- 执行");
        console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真实DOM挂载以后
    // 场景: 挂载后真实DOM
    mounted(){
        console.log("mounted -- 执行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4.更新阶段

更新阶段2个钩子函数作用和执行时机 获取更新后的DOM在updated钩子函数

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{
  { msg }}</p>
      <ul id="myUL">
1
2
3
4
5