vue教程 vue生命周期与双向绑定过程的关系

//传进来的data,会赋值给vm.data.
var vm = new Vue({
     el : '#app',
     data: {
         message: 'hello vue'
     },


     //刚创建完vue实例,开始调用初始化方法之后.
     //且在数据代理和劫持之前,触发钩子函数beforeCreate
     beforeCreate(){

         //这个时候还没有进行数据代理,数据劫持,也没有进行模板编译
         console.log( "beforeCreate:"+this.$data )  //undefined
         console.log( "beforeCreate:"+this.message )//undefined
         console.log( "beforeCreate:"+this.$el)//undefined
     },

     //1. 将vm上的data,代理到了vm.$data上.
     //2. 将vm.$data中的属性进行劫持,为每一个属性创建get,set方法,并且为属性创建对应的dep.
     created(){

         //这个时候已经进行了数据代理,数据劫持,但是还没有开始模板编译
         console.log("created:"+this.$data )  //[object Object]
         console.log( "created:"+this.message ) //hello vue
         console.log("created:"+this.$el) //undefined
     },

     //完成双向绑定.
     //将虚拟dom转化为真实dom,并为组件创建观察者,放到对应属性的对应dep之前,触发该钩子函数.  beforeMount
     beforeMount(){

         //此时,已经把模板导入,且发现this.$el是一个空对象.(真实dom被转成虚拟dom,从el上移除.这个时候el下没有真实的dom)
         console.log("beforeMount:"+JSON.stringify(this.$el))  //[object HTMLDivElement]
     },

     //完成双向绑定.
     //将虚拟dom转化为真实dom,并为组件创建观察者,放到对应属性的对应dep之后,触发该钩子函数. mounted
     mounted(){
         //此时,已经把模板解析完成,虚拟的dom转换成真实的dom,被添加到了el上.
         console.log("beforeMount:"+this.$data )
         console.log( "beforeMount:"+this.message )
         console.log("beforeMount:"+JSON.stringify(this.$el))  //直接报错
     },

     //当绑定的数据发生变化,这个时候对变化数据敏感的dom,在虚拟dom转化成真实dom之前,触发该钩子函数. beforeUpate
     beforeUpdate(){

         //此时数据发生变化,与之对应的组件转成虚拟dom,并且虚拟dom的状态修改完成,但是还没有转换成真实的dom.
     },

     //虚拟dom转化为真实dom,界面刷新之后,触发该钩子函数. updated
     updated(){

         //转化成真实的dom,界面刷新完成
     },


     //子组件,以及监听器删除之前,触发该钩子函数. beforeDestroy
     beforeDestroy(){

     },


     //子组件,以及监听器删除之后, 触发该钩子函数. destroyed
     destroyed(){

     }


 });