Vue 生命周期

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！'
                }
            },
            //生命周期函数：在一个组件的生命周期的某一时刻会自动执行的函数

            //1在组件生成之前自动执行
            beforeCreate(){
                console.log('beforeCreate');
            },
            //2在组件生成之后自动执行
            created(){
                console.log('created');
            },
            //3在组件内容渲染到页面之前调用自动执行
            beforeMount(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('beforeMount');
            },
            //4在组件内容渲染到页面之后调用自动执行
            mounted(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('mounted');
            },
            //5 当数据发生变化但页面未更新时调用自动执行
            beforeUpdate(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('beforeUpdate');
            },
            //6 当数据发生变化且页面已更新时调用自动执行
            updated(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('updated');
            },
            //7 当Vue实例失效且dom未销毁时调用自动执行
            beforeUnmount(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('beforeUnmount');
            },
            //8 当Vue实例失效时且dom已销毁时调用自动执行
            unmounted(){
                // console.log(document.getElementById("app").innerHTML);
                console.log('unmounted');
            },
            //8 全局的错误捕获
            errorCaptured(err,instance,info){
                console.log(err,instance,info);
                return false;
            },

            template:'<h1>{{msg}}</h1>'
        });

        app.mount('#app');

        setTimeout(()=>{
            app.unmount('#app');
        },6000)
    </script>
</body>
</html>

 

posted @ 2021-08-24 15:42  残星  阅读(37)  评论(0)    收藏  举报