Vue生命周期

<template>
    <div id="head">
        {{name}}
        <button @click="update">修改</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            name:'zhangsan'
        }
    },
    methods:{
        update(){
            this.name="张三被改变了";
        }
    },
    beforeCreate(){
        console.log('实例创建前')
    },
    created(){
        console.log('实例创建好啦')
    },
    beforeMount(){
        console.log('实例在挂载前')
    },
    mounted(){
        console.log('实例已挂载')
    },
    beforeUpdate(){
        console.log('实例被修改前')
    },
    updated(){
        console.log('实例修改后')
    },
    renderTracked(event){//监测页面的变化
        console.log('监测页面变化函数renderTracked')
        console.log(event)
    },
    renderTriggered(event){//检测页面的具体目标的变化
        console.log('监测具体变化函数renderTriggered')
        console.log(event)
    }
}
</script>

<style>
    #head{
        background: rgb(183, 183, 233);
        color: red;
    }
</style>

初始化页面：

点击页面修改后：