11.Vue中使用Ajax获取数据后界面未更新，使用$forceUpdate()强制更新

有个页面在加载后要从后台获取数据，然后显示

不过好像是数据层次有点多？像下面这样，获取的数据放在details里面，然后页面上对应的数据没有显示

res:[
  {
    name:'tom',
    age:10,
    details:[
      {
        name:'jerry'
      }
    ]
  }
]

但是在 Vue Devtools 里面数据是有的

然后在mounted执行完查询函数以后，使用$forceUpdate()强制刷新，页面上数据也没有显示，然后用 alert 显示发现数据是空的

mounted: function () {
  this.getdata();
  this.$forceUpdate();     //强制刷新视图
  alert(JSON.stringify(this.res[0]))
}

然后眉头一皱，发现事情并不简单，好像是因为Ajax是异步执行的，数据还在获取中

然后想了一下，既然数据还在获取，那我就等下在强制刷新，

然后将上面的mounted函数改了一下，设置一个 20ms 后执行强制刷新的定时器，然后数据就能够显示了

mounted: function () {
  this.getdata();
  // this.$forceUpdate();     //强制刷新视图
  alert(JSON.stringify(this.res[0]))  
  // 此时 直接查询 是空的 $forceUpdate() 刷新也没有显示
  // 这里设置 在加载完成后 20ms 后再强制刷新视图 
  _this=this;
  setTimeout(function(){ 
    _this.$forceUpdate(); 
  },20)
}

这个定时器的本意是，在 data 中有数据后再强制刷新

但是如果数据多了的话，获取数据时间再长一点，那不知道能不能显示出来了，定时器的时间也不能过长

然后就在想怎么判断数据已经获取完成了呢，然后突然想到 Ajax 本来就有获取成功和获取的回调函数

又重新改了一下，发现强制刷新成功了，页面能够显示数据，真是蠢到家了QAQ

mounted: function () {
  this.getdata();
}
----------------------------
getdata(){
  var _this = this; 
  Ajax({
    type: 'POST',
    url: this.url,
    data: 'code=' + this.code, 
    success: function (data) {
      if ('0' == data.erron) {  
        _this.res[0].details.push(data.data); 
        _this.$forceUpdate();
      } else {
        _this.res[0].details.push({ NAME: ''});
        console.log(data.msg)
        _this.$forceUpdate();
        return;
      }
    }.bind(this),
    failed: function (err) {
      alert('请求失败' + err.status);
      return;
    }
  });
}