生命周期函数

生命周期，指的就是一个组件从创建，到最后销毁的整个过程，就是组件的一个生命周期。

生命周期函数，就是组件生命周期的过程中，每当达到一个生命周期阶段时，会触发的一些对应的方法。

<template>
    <div>
        <h1 @click="num++">{{num}}</h1>
        <button @click="$destroy()">销毁</button>
    </div>

</template>

<script>
export default {
    data() {
        return {
            num: 10
        }
    },
    // 创建阶段
    beforeCreate() {
        console.log('beforeCreate 创建前');
    },
    created() {
        console.log('created 创建完成');
    },
    // 挂载阶段
    beforeMount() {
        console.log('beforeMount 挂载前');
    },
    mounted() {
        console.log('mounted 挂载完成');
    },
    // 更新阶段
    beforeUpdate() {
        console.log('beforeUpdate 更新前');
    },
    updated() {
        console.log('updated 更新完成');
    },
    // 销毁阶段
    beforeDestroy() {
        console.log('beforeDestroy 销毁前');
    },
    destroyed() {
        console.log('destroyed 销毁完成');
    }
}
</script>

页面首次加载时，会执行四个生命周期函数：

• beforeCreate
• created
• beforeMount
• mounted