Vue实例生命周期钩子

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

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

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

生命周期图示

例子

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

结语

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