Vue从Ajax获取数据后DOM未更新，视图显示空值求助

看起来你遇到了Vue响应式系统的常见小坑——DevTools里数据明明已经更新，但视图就是没跟着变化，我来帮你排查可能的原因和解决办法：

1. 先调整生命周期钩子的时机 #

你现在用的是beforeCreate钩子，但这个阶段Vue实例的data和methods还没完成初始化！这时候操作self.versions，大概率没办法被Vue的响应式系统正确追踪到。

解决办法：把beforeCreate换成created钩子，这个阶段实例已经初始化好data和methods了，操作数据更稳妥：

var app = new Vue({
  el: '#app',
  data: {
    versions: [ { name: 'A' }, { name: 'B' }, { name: 'C' } ]
  },
  // 替换为created钩子
  created: function () {
    var self = this;
    axios.get('http://serviceUrl.com')
      .then(function (response) {
        self.parseResponse(response.data);
      })
      .catch(function (error) {
        console.warn(error);
      });
  },
  // ... 你的methods方法
})

2. 检查数组操作是否符合响应式规则 #

Vue对数组的响应式监听有特定要求，如果你的parseResponse或addData里用了以下操作，Vue是检测不到的：

• 直接通过索引修改数组项：self.versions[0] = {name: 'D'}
• 直接修改数组长度：self.versions.length = 0

正确的响应式数组操作方式：

• 添加元素用push/unshift：self.versions.push({name: 'D'})
• 修改指定索引的元素用splice：self.versions.splice(0, 1, {name: 'D'})
• 或者直接替换整个数组：self.versions = response.data
• 如果必须用索引修改，用Vue.set：Vue.set(self.versions, 0, {name: 'D'})

3. 如果是给对象添加新属性 #

如果你的响应数据需要给versions中的对象新增属性（比如item.description = 'xxx'），直接赋值也不会触发响应式更新，因为Vue无法检测对象新增的属性。

解决办法：

• 用Vue.set添加属性：Vue.set(item, 'description', '新属性值')
• 或者创建新对象替换旧对象：self.versions[index] = Object.assign({}, item, {description: '新属性值'})

你可以对照自己的parseResponse和addData方法，看看是不是踩了以上某个坑，调整后应该就能让视图跟着数据一起更新啦！

内容的提问来源于stack exchange，提问作者Alexander Seredenko