Vue实例生命周期钩子

最新推荐文章于 2022-10-25 10:44:41 发布

一只抠代码的汪

最新推荐文章于 2022-10-25 10:44:41 发布

阅读量181

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/wangwangwang21/article/details/107755068

版权

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

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

beforeCreatd
在实例初始化之后，数据观测（data observer）和event/wacther 事件配置之前被调用，整个页面创建之前创建的生命周期
created
在实例创建完成后被调用立即执行，实例完成了数据观测（data observer），属性和方法运算，watcher/event事件回调，此时还未挂载，$el属性不可见
beforeMout
在挂载开始前被调用，此时相关的渲染函数首次被调用
mountde
el被创建的vm.el替换，挂载成功
beforeUpdate
数据更新时调用
update
组件Dom更新完毕
…

生命周期图示

在这里插入图片描述

例子

    <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>

在这里插入图片描述

结语

新人小菜鸡一枚，希望能帮到你！

一只抠代码的汪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例生命周期钩子

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

扫一扫