vue生命周期分为三个阶段，分别是：创建-执行-销毁,并且是从上向下按顺序执行

一、钩子函数

创建阶段（beforeCreate、created、beforeMount、mounted）
执行阶段（beforeUpdate、updated）
销毁阶段（beforeDestroy、Destroy）

二、使用时机

2.1 创建阶段（整个实例声明只执行一次）

beforeCreate：创建VUE实例前的钩子函数,此时组件的props/data/methods尚未被创建，处于不可用状态。

<template>
    <div id = "myapp">
        <p>{{ index }}</p>
        <button @click="add">+</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            index: 0
        }
    },
    methods: {
        add() {
            this.index += 1
        }
    },
    beforeCreate() {
        console.log('创建前状态')
        console.log(this.$el)  //undefined
        console.log(this.$data)  //undefined
        console.log(this.index)  //undefined
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //报错，还读不到innerHTML
    }
}
</script>

created: 实例创建完成之后的钩子函数,组件的props/data/methods已经创建好，处于可用的状态，但组件的模板结构尚未生成。此时还在内存中在此调用methods中方法，请求服务器中数据，并把请求数据转到data中，供template模板渲染使用。最早获取数据的钩子函数，进行Ajax请求异步数据获取，初始化数据。loading,异步,页面最快渲染 1366*1450

    created() {
        console.log('创建后状态')
        console.log(this.$el)   //undefined
        console.log(this.$data)   //object
        console.log(this.index)  //0
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //报错，还读不到innerHTML
    },

beforeMount: 开始挂载编译生成的HTML到对应位置时触发的钩子函数。但此时还未将编译出的HTML渲染到页面上。

    beforeMount() {
        console.log('载入前状态')
        console.log(this.$el)   //undefined
        console.log(this.$data)   //object
        console.log(this.index)  //0
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //报错，还读不到innerHTML
    }

mounted：将编译好的HTML挂载到页面完成后的执行钩子函数，也是最早操作DOM的钩子函数。

    mounted() {
        console.log('载入后状态')
        console.log(this.$el)  //<div id="myapp">...</div>
        console.log(this.$data)   //object
        console.log(this.index)  //0
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)   //<p>0</p><button>+</button>
    }

2.2 执行阶段（整个实例声明执行0-N次）

beforeUpdate：重新渲染组件模板结构组件运行阶段,页面结构此时还未跟上，下面p标签内。keep-alive
Update： updated执行时，页面和data数据已经保持同步，都是最新的

    beforeUpdate() {
        console.log('更新前状态')
        console.log(this.$el)      //<div id="myapp">...</div>
        console.log(this.$data)    //object
        console.log(this.index)    //1
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //<p>0</p><button>+</button>
    },
    updated() {
        console.log('更新后状态')
        console.log(this.$el)      //<div id="myapp">...</div>
        console.log(this.$data)   //object
        console.log(this.index)    //1
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //<p>1</p><button>+</button>
    }

2.3 销毁阶段（整个实例声明只执行一次）

beforeDestroy：此时组见中所有data、methods、以及过滤器，指令等，都处于可用状态,此时还未真正执行销毁过程
destroyed：当执行销毁了函数时，组件已经被完全销毁，此时组建中所有数据、方法、以及过滤器，指令等，都已经不可用了

    beforeDestroy() {
        console.log('更新前状态')
        console.log(this.$el)      //<div id="myapp">...</div>
        console.log(this.$data)    //object
        console.log(this.index)    //1
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //<p>0</p><button>+</button>
    },
    destroyed() {
        console.log('更新后状态')
        console.log(this.$el)      //<div id="myapp">...</div>
        console.log(this.$data)   //object
        console.log(this.index)    //1
        const res = document.querySelector('#myapp')
        console.log(res.innerHTML)  //<p>0</p><button>+</button>
    }

三、遇到的问题

其他同事经常用到setup(),setup()是vue3里的，但我们项目是vue2，vue3兼容vue2，setup()于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数。setup函数中是无法使用data 和 methods中的数据和方法的,最后都是需要return出去的,不然无法再模板中使用。setup函数只能是同步的不能是异步的