Vue_生命周期函数

        <script type="text/javascript">
            var vm = new Vue({
                el: app01,
                data:{
                    a:'test',
                },
                beforeCreate:function(){
                    console.log('实例创建之前');
                },
                created:function(){
                    console.log('实例创建之后');
                },
                beforeMount:function(){
                    console.log('再挂载开始之前被调用,相关的渲染函数首次被调用');
                },
                mounted:function(){
                    console.log('el被新创建的vm.$el替换,挂在成功');
                },
                beforeUpdate:function(){
                    console.log('数据更新时调用');
                },
                updated:function(){
                    console.log('组件DOM已经更新,组件跟新完毕时调用');
                }
            }
            setTimeout(function(){
                vm.a = '3秒后数据改变'
            }, 3000)
        </script>

结果:


1.beforeCreate()
初始化完成,VUE自动执行
2.created()
处理外部注入,包括双向绑定相关内容(基本vue的初始化完成了)
3.beforeMount()
页面渲染之前,模板和数据相结合,即将挂载到页面上的一瞬间
4.Mounted()
页面已经渲染完毕
5.beforeDestroy()
组件即将销毁(还没被销毁)
6.destroyed()
组件完全被销毁后
7.beforeUpdate()
数据发生改变,还未重新渲染
8.updated()
重新渲染之前

原文地址:https://www.cnblogs.com/wangdianchao/p/13211190.html