Vue生命周期详解

Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。

在Vue官网有这样一张图

<template>
    <div>
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            message: 'hello world'
        }
    },
    methods: {
        changeMsg () {
            this.message = 'goodbye world'
        }
    },
    beforeCreate() {
        console.log('------初始化前------')
        console.log(this.message)//undefined
        console.log(this.$el);//undefined
    },
    created () {
        console.log('------初始化完成------')
        console.log(this.message)//hello world
        console.log(this.$el);//undefined
    },
    beforeMount () {
        console.log('------挂载前---------')
        console.log(this.message)//hello world
        console.log(this.$el);//undefined
    },
    mounted () {
        console.log('------挂载完成---------')
        console.log(this.message)//hello world
        console.log(this.$el);
        // <div>
        //     <p>hello world</p>
        //     <button @click="changeMsg">改变</button>
        // </div>
    },
    beforeUpdate () {
        console.log('------更新前---------')
        console.log(this.message)//goodbye world
        console.log(this.$el);
        // <div>
        //     <p>goodbye world</p>
        //     <button @click="changeMsg">改变</button>
        // </div>
    },
    updated() {
        console.log('------更新后---------')
        console.log(this.message)//goodbye world
        console.log(this.$el);
        // <div>
        //     <p>goodbye world</p>
        //     <button @click="changeMsg">改变</button>
        // </div>
    },
    beforeDestroy() {
        console.log('------销毁前---------');
        console.log(this.message);
        console.log(this.$el);
    },
    destroy() {
        console.log('------销毁后---------');
        console.log(this.message);
        console.log(this.$el);
    }
}
</script>
 
<style lang="less">
</style>