vue 生命周期钩子

和生命一样，vue组件创建过程中会进入一系列的阶段。可以在这些阶段执行对应的方法。
先上图：

还有路由生命周期钩子，但是路由通常不属于组件的。是在所有组件生命周期开始之前被调用。
组件有以下几个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钩子。





在点击页面的返回按钮后，伺候该页面里面的组件会被销毁。











记住 还有导航，导航是组件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获取资源，当资源获取成功后才会跳到目标页面去，所以一直停留在该页面，需要有进度指示器



继续：

[code="js	export default{

		

		data:function(){

			return {

				report:{},

				error:null,

				loading:false,

				iszhb:localStorage.getItem(is_zhb.key),

				url_can_dispatch:false,

				path1:""

			}

		},

		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