Vue 中生命周期详解@酷酷的小航航

Vue实例生命周期示例：

<script type="text/javascript">
    
	  var app = new Vue({
	      el: '#app',
	      data: {
	          message : "xuxiao is boy" 
	      },
	       beforeCreate: function () {
	                console.group('beforeCreate 创建前状态===============》');
	               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
	               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
	               console.log("%c%s", "color:red","message: " + this.message)  
	        },
	        created: function () {
	            console.group('created 创建完毕状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
	               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
	               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
	        },
	        beforeMount: function () {
	            console.group('beforeMount 挂载前状态===============》');
	            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
	            console.log(this.$el);
	               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
	               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
	        },
	        mounted: function () {
	            console.group('mounted 挂载结束状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
	            console.log(this.$el);    
	               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
	               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
	        },
	        beforeUpdate: function () {
	            console.group('beforeUpdate 更新前状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el);
	            console.log(this.$el);   
	               console.log("%c%s", "color:red","data   : " + this.$data); 
	               console.log("%c%s", "color:red","message: " + this.message); 
	        },
	        updated: function () {
	            console.group('updated 更新完成状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el);
	            console.log(this.$el); 
	               console.log("%c%s", "color:red","data   : " + this.$data); 
	               console.log("%c%s", "color:red","message: " + this.message); 
	        },
	        beforeDestroy: function () {
	            console.group('beforeDestroy 销毁前状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el);
	            console.log(this.$el);    
	               console.log("%c%s", "color:red","data   : " + this.$data); 
	               console.log("%c%s", "color:red","message: " + this.message); 
	        },
	        destroyed: function () {
	            console.group('destroyed 销毁完成状态===============》');
	            console.log("%c%s", "color:red","el     : " + this.$el);
	            console.log(this.$el);  
	               console.log("%c%s", "color:red","data   : " + this.$data); 
	               console.log("%c%s", "color:red","message: " + this.message)
	        }
	    })
	</script>

Vue实例生命周期示例讲解：

beforeCreate（创建前）：
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，因此无法访问methods，data，computed等上的方法和数据。

created（创建后）：
实例已经创建完成之后被调用，在这一步，实例已完成了以下配置：数据观测、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没有开始，$el属性目前不可见。这是一个常用的生命周期，因为你可以调用methods中的方法、改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。通常我们可以在这里对实例进行预处理。也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个页面发请求。 建议在组件路由勾子beforeRouteEnter中来完成。

beforeMonut：挂载开始之前被调用：相关的 render 函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted[ˈmaʊntɪd]：挂载完成，也就是模板中的HTML渲染到了HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate（更新前）：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated[ʌp’deɪtɪd]（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy[dɪˈstrɔɪ]（销毁前）：在实例销毁之前调用。实例仍然完全可用。1.这一步还可以用this来获取实例。2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件。

destroyed[dɪs’trɔɪd]（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。