组件生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码

生命周期示意图

xxxxxxxxxx
<template>
    <h3>组件生命周期</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">更新数据</button>
</template>
<script>
export default {
    data(){
        return{
            message:"老数据"
        }
    },
    methods:{
        updateHandle(){
            this.message = "新数据"
        }
    },
    beforeCreate(){
        console.log("组件创建之前");
    },
    created(){
        console.log("组件创建之后");
    },
    beforeMount(){
        console.log("组件渲染之前");
    },
    mounted(){
        console.log("组件创建之后");
    },
    beforeUpdate(){
        console.log("数据更新之前");
    },
    updated(){
        console.log("数据更新之后");
    },
    beforeUnmount(){
        console.log("组件卸载之前");
    },
    unmounted(){
        console.log("组件卸载之后");
    }
}
</script>

实时效果反馈

1. 下列那个是组件渲染之后执行的生命周期函数：

A created

B mounted

C updated

D unmounted

答案

1=>C