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