vue的生命周期函数详解，前后端分离系统中生命周期方法的使用场景，包看包会

看不懂可以直接找我

Vue 的生命周期

Vue 实例生命周期==>java对象生命周期（初始化阶段 运行阶段 销毁阶段） 生命周期钩子 ==>生命周期函数

Vue 实例从创建到销毁过程中自动触发一系列函数 ==> Vue 生命周期函数(钩子)

Vue的生命周期分为三个阶段：

1、初始化阶段

1、Init Events&Lifecycle

这个时候已经开始进行vue初始化，在这个时候开始完成的是vue实例自身对象注入，内部使用相关事件和对应生命周期函数初始化

2、beforeCreae

第一个生命周期函数，当这个方法执行的时候，vue实例仅仅是完成内部事件和生命周期函数

const app = new Vue({
    el: "#app",//用来给Vue实例定义一个作用范围
    data: {//用来给Vue实例定义一些相关的数据
        msg: "Vue的生命周期",
    },
    methods:{},
    computed:{},
    // 第一个执行的生命周期函数
    beforeCreate(){
        console.log("beforeCreate()方法调用 "+this.msg);
    }
});

3、Init injections & reactivity

数据的注入，跟语法的校验，我们编写的data，method开始注入

4、created

第二个执行生命周期函数，注意：在这个时候函数执行的时候vue实例已经完成自定义data，method，computed属性初始化，以及语法效验

created(){
    console.log("created:"+this.msg);
}

5、beforeMount

​ 第三个生命周期函数,注意：在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板，

​ 此时并没有完成模板内容渲染，{{msg}}还没被替换

6、mounted

​ 第四个执行的生命周期函数 注意: 在这个函数执行的时候vue实例会将data数据渲染到编译的模板中，
​ 并形成虚拟dom，替换el执行dom

2、运行阶段

1、beforeUpdate

第五个执行的生命周期函数 注意：在这个函数执行的时候，vue实例中data数据发生变化，
但是页面中数据还是原始数据

2、update

第六个执行的生命周期函数 注意： 在这个函数执行的时候，vue实例中data数据和页面中数据已经一致了

3、销毁阶段

1、beforeDestory

第七个执行的生命周期函数 注意：在这个函数执行的时候，vue实例仅仅是开始销毁 events 、child component

listener监听机制

2、destroyed

第八个执行的生命周期函数 注意：在这个函数执行的时候，vue实例上的所有数据 events childcomponent 监听机制 … 全部清空（包括双向数据绑定机制，如下有）

4、使用场景：

如果是前后端分离系统，在前端axios发生get请求到后端拿取数据，进行初始化数据渲染：

我们应该在created生命周期函数方法进行请求beforeMount，mounted生命周期函数方法也可以

但是created是最好的时机，因为在created方法执行的时候，其他数据已经被渲染进去了，但是最好不要选择mounted ，因为mounted会先拿的数据渲染一次，在拿着响应回来的数据在渲染一次，会造成两次调用虚拟Dom