vue 生命周期钩子

和生命一样，vue组件创建过程中会进入一系列的阶段。可以在这些阶段执行对应的方法。
先上图：
[img]http://dl2.iteye.com/upload/attachment/0122/4591/d949cfb2-f49c-3737-bb45-aec96b2ccdda.png[/img]
还有路由生命周期钩子，但是路由通常不属于组件的。是在所有组件生命周期开始之前被调用。
组件有以下几个state。

 beforeCreate:()
created:这里已经完成了数据观察，可以改变data里面的属性值，并且会被响应到 可以在这里添加loading开关 可以在这里获取数据了
beforeMount:
mounted(从这里可以开始访问$el，此时的html是以data里面的数据直接进行渲染的，可以在这里渲染loading样式)
beforeUpdate:(还可以更改状态)
updated:（可以获取到更新后的dom）
beforeDestroy:(可以在这里提示用户还有信息没有保存)
destroyed:还是可以获取到el的内容 

假如数据一开始就绑定上去，后面不更新数据的话 调用顺序依次为：

beforeCreate->created->beforeMount->mounted 完毕。

如果一开始是这样report={};
后来在mounted里面发起了ajax请求，数据回来后回去更新report。此时还会触发beforeUpdate.
updated钩子。

[img]http://dl2.iteye.com/upload/attachment/0122/4609/c987ad92-9a08-30b0-a68d-d2c44911c519.png[/img]
在点击页面的返回按钮后，伺候该页面里面的组件会被销毁。

[img]http://dl2.iteye.com/upload/attachment/0122/4611/6e1ec622-c801-3f5d-b75b-34b63a8285c0.png[/img]


记住 还有导航，导航是组件beforeCreate之前调用的。先eachbefore，再beforeRouteEnter 然后才是组件内部的beforeCreate等等生命钩子。 销毁时。看上图 可以得知是先调用路由自己的beforeRouteLeave再调用beforeEach钩子，然后才是路由自己的。 可以在beforeDestroy里面保持数据。等下一次进来时获取数据减少流量

获取数据：可以在created里面 或者在beforeRouteEnter 里面
在第二种里面的话：

beforeRouteEnter (to,from ,next){
		  console.log("beforeRouteEnter ");

		  var json={
		  	userPhoneForMobile:localStorage.getItem("phone"),
		  	reportId:to.params.id
		  };

		  $.get(url.get_report_item,json,(d)=>{

		  	d=JSON.parse(d);
		  	next(vm=>{
		  		vm.report=d.data
		  	})
		  })
		  // this.getReport(to.params.id);

		}

即在渲染组件之前利用路由信息直接取ajax获取资源，当资源获取成功后才会跳到目标页面去，所以一直停留在该页面，需要有进度指示器

继续：

			}
		},
		methods:{
			getReport(id){
				var json={
					reportId:id
				}
				util.post(get_report_item.url,json,(d)=>{
					this.loading=false;
					this.report=d.data;
			 		console.log("report 来临")

				})
			},
			get_title(){
			 	return util.getTitleStr(this.$route.name);
			 },
			display_desc(name){
			 	return !!name&&name!="接单"&& name !="上报到指挥部";
			 },
			 get_can_be_ispatch(){
			console.log("pathh2 发送");

			 	util.post(canbedispatch.url,{},(d)=>{
			 		this.url_can_dispatch=d.data;
			 		console.log("if canbe 来临")
			 	}

			 		)
			 }

		}, 
		computed:{
			imgcut_equl_2(){
				return this.report.imgUrlList.filter((img)=>{
					return img.imgIsCut===2;
				})
			},
			imgcut_equl_3(){
				return this.report.imgUrlList.filter((img)=>{
					return img.imgIsCut===3;
				})
			},
			canbedispatch(){
				return this.report.status!=3&&this.url_can_dispatch;
			},
			// 区分是否是我报的单
			myreport(){
				return this.$route.query.myreport||false;
			}

		},
		beforeCreate(){
			console.log("beforeCreated");
		},
		created(){
			console.log("created");
			// this.loading=true;
			console.log("report 发送");
			this.getReport(this.$route.params.id);
			console.log("pathh1 发送");

			this.get_can_be_ispatch();
		},
		beforeRouteEnter (to,from ,next){
		  console.log("beforeRouteEnter ");
		  console.log(from.name)
		  next(vm=>{
		  	console.log("heh")
		  		console.log(from.name)
		  	vm.path1=from.name

		  vm.$nextTick(()=>{
		  	console.log("这是nexttick",vm.$el.innerHTML);
		  })

		  }
		  	);
		},
		beforeRouteLeave(to,from ,next){
		  console.log("beforeRouteLeave");
		  var ok=true;
		  if(ok){
		  	next();
		  }else{
		  	next(false)
		  }

		},
		beforeMount(){
			console.log("beforeMount");
		},
		mounted(){
			console.log("mounted");
			console.log(this.$el.innerHTML)

		},
		beforeUpdate(){
			console.log("beforeUpdate");
			console.log(this.$el.innerHTML);
		},
		updated(){
			console.log("updated");
			console.log(this.$el);
		},
		beforeDestroy(){
			console.log("berforeDestroy");
		},
		destroyed(){
			console.log("destroyed");
		},
		updated(){
			console.log("updated");
			console.log(this.$el.innerHTML);
		},

		filters:{
			sub_str(str){
				return util.substr(str);
			},
			format_time(time){
				return util.format_time(time);
			},
			get_list_name(list=[],key="typeName",split=","){

				return util.get_list_name(list,key,split);

			}
		}, 
		components:{
			nvHead
		} 

	}">

注意里面的 在 next(vm=>{
console.log("heh")
console.log(from.name)
vm.path1=from.name

vm.$nextTick(()=>{
console.log("这是nexttick",vm.$el.innerHTML);
})
本语句的执行时机是mounted钩子调用之后被调用。
但是注意当vm.path=from.name之后，触发了updated,但是在updated之后dom并没有更新。而是在调用vm.$nextTick之后才看见了dom的更新，这是因为dom更新是异步的。

this.lists=arr;
 this.$nextTick(() => {
                         $(window).scrollTop(window.window.sessionStorage.scrollTop);
                         console.log('已经滚动到顶部了');
                });

此时是先调用beforeUpdate钩子，然后是updated钩子 ，完成之后调用nexttick
[img]http://dl2.iteye.com/upload/attachment/0122/4820/a0626594-2d6b-3a02-94ee-07c94098a1d8.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0122/4819/b05a7196-1fe3-3307-8d08-71a46cf3a788.png[/img]