Vue3的生命周期函数 

<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
            <button @click="show">{{message}}</button>
        </div>
    </body>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    message: 'hello world!'
                }
            },
            methods:{
                show(){
                    alert('click');
                }
            },
            //Vue实例创建之前
            beforeCreate(){
                alert('before create');
            },
            //Vue实例创建完毕
            created(){
                alert('created');
            },
            //模板渲染之前
            beforeMount(){
                alert('beforeMount');
            },
            //模板渲染完毕
            mounted(){
                alert('mounted');
            }
        });

        app.mount('#app');
    </script>
</html>

beforeCreate 　　　　实例创建之前

createt　　　　　　　实例创建完毕

beforeMount　　　　模板渲染之前

mounted　　　　　　模板渲染完毕

posted @ 2021-09-14 15:24  qinggua  阅读(142)  评论(0)  编辑  收藏  举报