vue生命周期问题

Question

场景：分页父组件通过axios取到后端laravel的数据flightdata，flightdata中包含一个总页数total，每页显示数据条数per_page父组件：向子组件pager传page、last和path，last是通过total/per_page向上取整计算出来的，问题就出在它上面......exportdefault{//路由传过来的当前页props:['page'],data(){return{flightsData:'',path:'today',//last:999,last:'',api:'/notice_today/all'}},created(){this.getData()},watch:{'$route'(to,from){this.getData()}},methods:{getData(){this.axios({method:'get',baseURL:'/api',url:this.api,params:{page:this.page},timeout:500,withCredentials:true}).then(response=>{this.flightsData=response.datathis.last=Math.ceil(this.flightsData.total/this.flightsData.per_page)})}},...}子组件：...//遍历pagerArray生成页码...//观察父组件传过来的值{{current}}{{last}}{{_last}}{{path}}exportdefault{props:{current:{default:1},last:{required:true},path:{required:true}},data(){return{pagerArray:[],_last:''}}mounted(){this.pagerRender()},watch:{'$route'(to,from){this.pagerRender()}},methods:{pagerRender(){//this.last要参与计算this._last=this.last}}}发现问题：子组件的pagerRender()方法要用到父组件传给子组件的值last但是父组件却不能第一时间把last最新的值传给子组件：我将父组件的last赋一个值99，父组件应该在created阶段通过getData()方法给last赋成真实页数的值，比如5我子组件中的created阶段通过pagerRender()方法将last的值赋给_last，按理来说，最后{{last}}和{{_last}}都该是真实页数5，但是第一时间打开页面时{{_last}}的值其实是99，{{last}}值为5，难道last的值传进子组件两次？！改变页数（点击上下页）后{{_last}}才开始和{{last}}同步，就是说第一次渲染页面的时候last的最新值没有第一时间传到子组件但是同时{{current}}和{{_current}}的值都是对的我觉得我对生命周期理解出了什么问题，但是确实找不到原因

Answer 1

在子组件添加last的watch
watch:{
'$route'(to,from){
this.prev_and_next()
this.pagerRender()
},
'last'(to,from){
this.pagerRender()
}
},
解决了这个问题
                            

Answer 2

axios的通讯是异步的，即便父组件created时候开始的，但是得到的时候可能已经是子组件_last已经赋值了;建议放到router.query或者param里面,再有子组件wtach赋值;这样旧值依然会在;