Vue的运行周期

vue生命周期

vue的生命周期是指对象的生命周期，其中又分为了三类。
1.创建时期的生命周期、2.运行时期的生命周期、3.销毁时期的生命周期。下面就来说说这三个生命周期。

1.首先我们先创建一个new的对象。

2.然后初始化事件和生命周期。

3.beforeCreate(){}表示初始化的生命周期函数，代表了函数完全被创建出来了，

例如
			var vm  = new Vue({
					el:'#app',
					data:{
							msg:'ok'
						},
					methods:{
								show(){
									console.log('test')
									},
					   			beforeCreate(){
										console.log(this.msg)
										console.log(this.show)
									}
					        }
   					})
   					

执行以上函数就会发现，msg是没有数据的，也就是还没有初始化任何的数据以及方法。

4.紧接着就会开始初始化，也就是在init，里面有校验和注入。

5.初始化之后就会开始执行，

created的方法
var vm  = new Vue({
					el:'#app',
					data:{
							msg:'ok'
						},
					methods:{
								show(){
									console.log('test')
									},
					   			beforeCreate(){
										//console.log(this.msg)
										//console.log(this.show)
									}，
									created(){
									    console.log(this.msg)
										console.log(this.show)
									 }
					        }
   					})
   在以上的函数中created（）{}里面的内容就可以被完全执行了，这是第一次可以调用数据和方法的函数

6.表示vue开始编译模板，在内存中生成一个编译好的最终模板字符串，这个时候只是在内存中生成了模板DOM并没有把模板放在页面中。

7.beforeMount(){}这个函数表示模板已经编译完成了，但是并没有放在页面中去。

例如  
   				<h1  id='test'>{{msg}}</h1>
   			methods:{
		beforeMount(){
		consloe.log(document.getElementById('test').innerText)
		}
}
这个时候只会输出 ' {{msg}} '   这个字符串在控制台中，应为只是在内存中编译好了还没有放入到html页面中

8.将内存中编译好的模板放入html页面中去。

9.使用mounted(){}函数就可以输出页面中的vue值了

  例如  
   				<h1  id='test'>{{msg}}</h1>
   			methods:{
   				data:{
   				    msg:'ok'
   				},
		            mounted(){
		  consloe.log(document.getElementById('test').innerText)
		}
	这个时候后台会输出ok
初始化的函数如上就结束了

接下来是运行中的变化。

10.运行中的变化收首先要提到的就是beforeUpdate(){}这个函数在更新数据前执行，

假设现在有一个{{msg}}我们设定有一个按钮，点击按钮之后msg的样式就会发生变化，那么这个页面的数据会发生改变，在改变之前呢会执行beforeUpdate这个函数。这个时候数据没有到内存中。

11.当执行了解析前的数据，那么接下来就要将
数据加载到内存dom中---->然后重新渲染数据—>最后进行加载至html页面中。

12.最后也就是我们最新的数据了，会执行updated(){}函数，这个和我们最新的函数是一致的。

13，最后就是销毁函数了 当执行beforeDestroy（）的时候，vue实例，就已经从运行阶段进入到销毁阶段了，但是beforeDestory(){}钩子函数还没有真正执行销毁过程，一切都还是可以使用的。

14 进行销毁。

15.最后会执行destroy函数，次时，vue 实例就被销毁了就结束了。