请教懂行的，vue的this.$nextTick无法获取外部传过来的数据，是怎么回事？

Question

子组件如下：
props:{

  list: {
    type: Object
  }

}

list是该子组件要获得的list数据，其中list是父组件访问后台获取的，而且list数据父组件访问后台可以成功获取的。
为了在子组件获取list数据之后等待 Vue 完成更新DOM，我执行
mounted（）{
   this.$nextTick(function () {
    console.log(this.list) 
  })       
}
但是console.log(this.list)打印出来的是空对象。
**因为不是说子组件获取list数据之后，this.$nextTick的回调函数在 DOM 更新完成
后才会调用吗**？
既然子组件没有获取list数据，this.$nextTick的回调函数为什么会被调用？那如何解决呢？
希望给个靠谱答案，不要随口一说。

Answer 1

在后台获取成功之后打印吧，直接打印都没赋值，异步请求成功才赋值的，当然为空了

Answer 2

或许你可以把在父组件中的请求，放到这个子组件，

let _this = this;
this.$axios.get("url").then(function(data){
    _this.$nextTick(function () {
         //console.log(data)
         _this.list = data;   
      });
});

Answer 3

因为这个list异步数据是在外部mounted之后才获的，根据组件的生命周期，子组件的mounted是在外部组件的mounted之前，也就是说外部props进来的数据是空的。

Answer 4

首先希望题主了解一下nextTick的用途，它是用来将回调放入下一个“tick”，也就是在microtask（优先）或者task中放进回调等待执行。Vue默认是异步更新策略的，也就是当数据改变，不是即使将数据更新到视图上，而是将Watcher对象缓存到队列中，等到当前调用栈执行完，再下一个“tick”的时候，才会进行视图的更新。之前写过一篇文章Vue.js异步更新DOM策略及nextTick希望可以帮助到你。

然后回到问题，nextTick在这里不是这么用的，问题中要获取this.list应该是等到它被赋值（题主赋值的时候应该是后台请求返回数据吧），而不是在nextTick的时候凭空会被赋值。nextTick就是在调用栈中会被继续调用执行，当然会触发，跟list是否被更新无关，题主应该将这个打印放到list被赋值（也就是后端接口的回调）中。

Answer 5

判断不是一个空对象的时候打印

Answer 6

父组件通过XHR异步获取数据，nextTick里面的内容执行时数据仍未获取到，你可以用下watch，当type有值之后把值付给子组件实例中的this。

Answer 7

直接在子组件computed定义一个方法
list()
return this.props传来的数组
引用的时候可以直接this.list