您的当前位置:首页正文

Vue实例生命周期钩子

2024-11-28 来源:个人技术集锦

啥是Vue实例生命周期钩子?

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。这是Vue官方说明,就好比人一样,你只有满了22岁(男)才能领结婚证结婚,满60岁后才可以领养老保险金,符合了一定条件,才能干某些事…

生命周期图示

例子

    <body>
        <div id="app">
            {{message}}
        </div>
        <script>
            var vm =   new Vue(
                {
                    el:'#app',
                    data:{
                        message:"hi Vue"
                    },
                    //在实例初始化之后,数据观测(data observer)和event/wacther 事件配置之前被调用
                    //整个页面创建之前创建的生命周期
                    beforeCreate:function()
                    {
                        console.log("beforecreated!");
                    },
                    //在实例创建完成后被调用立即执行
                    //实例完成了数据观测(data observer),属性和方法运算,watcher/event事件回调
                    //此时还未挂载,$el属性不可见
                    created:function ()//created 钩子以用来在一个实例被创建之后执行代码:
                    {
                        console.log("created")
                    },
                    //在挂载开始前被调用,此时相关的渲染函数首次被调用
                    beforeMount:function()
                    {
                        console.log("beforeMount")
                    },
                    //el被创建的vm.el替换,挂载成功
                    mounted:function()
                    {console.log("Mounted")},
                    //数据更新时调用
                    beforeUpdate:function()
                    {
                        console.log("beforeUpdate")

                    },
                    //组件Dom更新完毕
                    update:function()
                    {
                        console.log("update")
                    }
                }
            );
            
            setTimeout(function(){
                vm.message = "changed";
            },3000)
        </script>
    </body>

结语

新人小菜鸡一枚,希望能帮到你!

显示全文