十四、Vue的生命周期（钩子函数）

水深无声 2022-05-03 07:28 187阅读 0赞

#                                   Vue的生命周期（钩子函数） #

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>构造器的声明周期</title>
    </head>
    <body>
        <h1>构造器的声明周期</h1>
        <hr>
        <div id="app">
            {
       {message}}
            <p><button @click="jia">加分</button></p>
        </div>
            <button onclick="app.$destroy()">销毁</button>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    message:1
                },
                methods:{
                    jia:function(){
                        this.message ++;
                    }
                },
                beforeCreate:function(){
                    console.log('1-beforeCreate 初始化之后');
                },
                created:function(){
                    console.log('2-created 创建完成');
                },
                beforeMount:function(){
                    console.log('3-beforeMount 挂载之前');
                },
                mounted:function(){
                    console.log('4-mounted 被创建');
                },
                beforeUpdate:function(){
                    console.log('5-beforeUpdate 数据更新前');
                },
                updated:function(){
                    console.log('6-updated 被更新后');
                },
                activated:function(){
                    console.log('7-activated');
                },
                deactivated:function(){
                    console.log('8-deactivated');
                },
                beforeDestroy:function(){
                    console.log('9-beforeDestroy 销毁之前');
                },
                destroyed:function(){
                    console.log('10-destroyed 销毁之后')
                }
            })
        </script>
    </body>
    </html>