1、生命周期：
每个vue实例或者组件从创建到显示再到废弃的过程就是vue的生命周期。
2、为什么会有生命周期：
很多时候我们希望能在vue生命周期的过程中执行一些操作，所以才有了生命周期钩子。生命周期钩子函数允许我们在实例的不同阶段执行各种操作，便于我们更好的控制和使用实例。
接下来首先看个实例：

<template>
    <div @click="clickAdd">
        <p>请注意：初始化值10</p>
        <p style="color:red;font-size:18px;height:30px;line-height:30px;margin-left:50px;">{{message}}</p>
        <button>点击message加10，一起来看看vue生命周期，</button>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            message: 10,
        };
    },
    beforeCreate() {
        console.log(this.message, '创建前的状态--this.message');
        console.log(this.$data, '创建前的状态--this.$data');
        console.log(this.$el, '创建前的状态---this.$el');
        console.log('------------------beforeCreate-------------------');
    },
    created() {
        console.log(this.message, '创建完成的状态--this.message');
        console.log(this.$data, '创建完成的状态--this.$data');
        console.log(this.$el, '创建完成的状态--this.$el,');
        this.message = this.message + 5;
        // setTimeout(()=>{
        //     this.message = this.message + 5;
        // },2000);
        console.log(this.message, '此时实例创建完后，数据已经和data属性进行绑定，此时可以获取到data中的数据并对他进行操作-------this.message = this.message + 5;');
        console.log('-------------------created-------------------');
    },
    beforeMount() {
        console.log(this.message, '实例挂载前的状态--this.message');
        console.log(this.$data, '实例挂载前的状态--this.$data');
        console.log(this.$el, '实例挂载前的状态--this.$el,');
        console.log('-------------------beforeMount-------------------');
    },
    mounted() {
        console.log(this.message, '实例挂载完成的状态--this.message');
        console.log(this.$data, '实例挂载完成的状态--this.$data');
        console.log(this.$el, '实例挂载完成的状态--this.$el,');
        console.log('---------------------mounted-------------------');
    },
    beforeUpdate() {
        console.log(this.message, '实例更新前的状态--this.message');
        console.log(this.$data, '实例更新前的状态--this.$data');
        console.log(this.$el, '实例更新前的状态--this.$el,');
        // this.message = "hello";
        // alert('组件更新前');
        console.log('-------------------beforeUpdate-------------------');
    },
    updated() {
        console.log(this.message, '实例更新完成的状态--this.message');
        console.log(this.$data, '实例更新完成的状态--this.$data');
        console.log(this.$el, '实例更新完成的状态--this.$el,');
        // this.message = "hello";
        // alert('组件更新完成');
        console.log('-------------------updated-------------------');
    },
    beforeDestroy() {
        console.log(this.message, '实例销毁前的状态--this.message');
        console.log(this.$data, '实例销毁前的状态--this.$data');
        console.log(this.$el, '实例销毁前的状态--this.$el,');
        console.log('-------------------beforeDestroy-------------------');
    },
    deactivated() {
        console.log(this.message, '实例销毁完成的状态--this.message');
        console.log(this.$data, '实例销毁完成的状态--this.$data');
        console.log(this.$el, '实例销毁完成的状态--this.$el,');
        console.log('-------------------deactivated-------------------');
    },
    methods: {
        clickAdd() {
            this.message += 10;
        }
    }
};
</script>

1）、beforeCreated： ---- 实例创建前的阶段，此时改实例内所有东西都还没有创建，所以在这个生命周期钩子函数中，this.data，都是undefined；如图：

image.png

2）、created: ----- 实例创建完成的阶段，此时可以拿到实例中的this.message , this.el。
在这一步，实例已完成：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调的配置。但是，挂载阶段还没开始，$el property 目前尚不可用。

image.png

image.png

3）、beforeMount和 mounted钩子函数的生命周期，此时是给vue实例对象添加el,,在挂载之前调用，相关的render函数首次被调用。 mounted()挂载完成后可以拿到el替换掉。

image.png

4）、beforeUpdate钩子函数和updated钩子函数间的生命周期。
当vue发现data中的数据发生变化，会触发对对应组件的重新渲染，当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。可以通过点击message加10的事件来触发update事件。输出如下图：

image.png

beforeUpdate（）数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
updated() 数据更改导致的虚拟DOM重新渲染和打补丁，在这之后调用。当这个钩子函数调用时，组件DOM已经更新，此时可以执行依赖于DOM的操作。实际开发中，应该尽量避免在此期间更改状态，如果想要改变状态，建议选择计算属性和watch来代替它。特别注意：updated不会保证所有的子组件也都一期被重绘，如果想要等到整个试图都重绘完毕，可以在这里调用this.$nextTick().

可以看到beforeUpdate和updated里面的message值都进行了加10 的操作，所以data值改变后，先触发beforeUpdata钩子函数，当页面渲染完成后调用updated。这点可以通过在updated钩子函数中使用alert打断程序运行，可以看到页面中并没有更新，

image.png

注意：通过试验证明，在mounted钩子函数中执行修改data的操作会触发beforeUpdate，而它之前的函数中只要不是可以跳出主线程的数据操作，都不会触发beforeUpdate。例如使用setTimeout会使其中代码跳出主线程到异步线程中，所以它的执行会在mounted之后，所以会触发beforeUpdate。
图例：

image.png

image.png

image.png

image.png

5）、beforeDestroy和destroyed钩子函数间的生命周期。
beforeDestroy钩子函数在实例销毁之前调用,在这一步实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

最后附上官网生命周期整个流程图：vue组件是可复用的vue实例，所以每个组件的创建都会用到以上生命周期钩子函数。

Vue 实例生命周期