Above:
There are also routing lifecycle hooks, but routing usually does not belong to components. is called before the lifecycle of all components begins.
The component has the following states.
beforeCreate:() created: The data observation has been completed here, the attribute value in the data can be changed, and it will be responded that the loading switch can be added here to get the data here beforeMount: mounted (you can start accessing $el from here. At this time, the html is directly rendered with the data in the data, and the loading style can be rendered here) beforeUpdate: (can also change state) updated: (you can get the updated dom) beforeDestroy: (you can prompt the user here that there is still information that has not been saved) destroyed: You can still get the content of el If the data is bound at the beginning, and the data is not updated later, the calling sequence is as follows:beforeCreate->created->beforeMount->mounted 完毕。
If it was like this at the beginning, report={};
and then an ajax request was initiated in the mounted, and the data came back and went back to update the report. At this point, the beforeUpdate.updated
hook is also triggered.
After clicking the back button of the page, the components serving the page will be destroyed.
Remember there is also navigation, which is called before the component's beforeCreate. First eachbefore, then beforeRouteEnter, and then beforeCreate and other life hooks inside the component. when destroyed. Looking at the picture above, you can see that the route's own beforeRouteLeave is called first, then the beforeEach hook is called, and then the route's own. You can keep data in beforeDestroy. Get data to reduce traffic when you come in next time.
Get data: it can be in created or beforeRouteEnter.
In the second case: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); }
That is, before rendering the component, use the routing information to directly fetch the ajax to obtain the resource. When the resource is successfully obtained, it will jump to the target page, so it stays on the page and needs a progress indicator.
Continue :
[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 is coming")
})
} ,
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
}
}"]
Note that inside next(vm=>{
console.log("heh")
console.log(from.name)
vm.path1=from.name
vm.$nextTick(()=>{
console.log("This is nexttick",vm.$el.innerHTML);
})
The execution timing of this statement is called after the mounted hook is called.
But note that when vm.path=from.name, the updated is triggered, but the dom is not updated after the updated .but only after calling vm.$nextTick to see the dom update, this is because the dom update is asynchronous.
this.lists=arr;
this.$nextTick(() => {
$(window).scrollTop(window.window.sessionStorage.scrollTop);
console.log('Scrolled to the top');
});
At this point, the beforeUpdate hook is called first, then the updated hook is called, and nexttick is called after completion.
