vue 生命周期

一、示例

const app = Vue.createApp({
        data(){
            return{
                message:'hello world'
            }
        },
        beforeCreate(){ //实例创建完成之前会自动执行的函数
            console.log('beforeCreate',document.getElementById('root').innerHTML)
        },
        created(){// 实例创建完成之后会自动执行的函数
            console.log('created',document.getElementById('root').innerHTML)
        },
        beforeMount(){// 就是template模板变成render函数之后，也就是组件内容被渲染到页面之前自动执行的函数
            console.log()
            console.log('beforeMount:',document.getElementById('root').innerHTML)
        },
        mounted(){// 就是组件内容被渲染到页面上之后自动执行的函数
            console.log('mounted',document.getElementById('root').innerHTML)
        },
        // 当页面数据改变之前，立即自动执行的函数
        beforeUpdate(){
            console.log('beforeUpdate',document.getElementById('root').innerHTML)
        },
        // 当数据改变之后自动执行的函数
        updated(){
            console.log('updated',document.getElementById('root').innerHTML)
        },
        // 想测试数据销毁的两个生命周期的不同，可以在控制台打印vm.unmount()
        // 当数据销毁之前自动执行的函数
        beforeUnmount(){
            console.log('beforeUnmount',document.getElementById('root').innerHTML)
        },
        // 当数据销毁且DOM完全销毁之后自动执行的函数
        unmounted(){
            console.log('unmounted',document.getElementById('root').innerHTML)
        },
        template:`<div>{{message}}</div>`
    });
    app.component('',{})
    const vm = app.mount('#root')

二、解析