首页 > 其他分享> > Vue3的生命周期函数

Vue3的生命周期函数

2021-09-14 15:31:31 作者：互联网

<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　　　　　　模板渲染完毕

标签：生命,Vue,beforeMount,app,周期函数,alert,实例,Vue3,模板
来源： https://www.cnblogs.com/qinggua/p/15267762.html