vue生命周期问题

Question

场景：分页
父组件通过axios取到后端laravel的数据flightdata，flightdata中包含一个总页数total，每页显示数据条数per_page

父组件：向子组件pager传page、last 和 path，last是通过total/per_page向上取整计算出来的，问题就出在它上面

<template>
    <div>
        ...
        <pager :current="page" :last="last" :path="path"></pager>
    </div>
</template>
<script>
...
export default {
    //路由传过来的当前页
    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.data
                this.last = Math.ceil(this.flightsData.total / this.flightsData.per_page)
            })
        }
    },
...
}
</script>

子组件：

<template>
    ...
    //遍历pagerArray生成页码
    ...
    //观察父组件传过来的值
    {{ current }}
    {{ last }}
    {{ _last }}
    {{ path }}
</template>
<script>
export default {
    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
        }
    }
}
</script>

发现问题：
子组件的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赋值;这样旧值依然会在;