Vue对象无响应问题：本地正常但部署服务器后数据不渲染

从你的描述来看，这典型是Vue2响应式系统的「属性添加/删除检测限制」导致的问题——本地开发模式下Vue有额外的调试机制可能让你暂时看不到这个问题，但生产环境（服务器部署）的优化会让这个问题显现出来：哪怕控制台和Devtools里数据显示正常，DOM也不会同步更新。

下面给你几个可行的解决方案：

• 提前声明所有需要的响应式属性（推荐）
  Vue2的响应式是在初始化时对data里的属性做依赖收集的，如果你一开始只声明了空对象，后续新增的属性不会被纳入响应式系统。所以最好在data里就把需要用到的属性都初始化好：

data() {
  return {
    // 不再是空对象，而是包含所有需要的属性并赋初始值
    info: {
      name: '',
      age: '',
      // 其他你需要的属性
    }
  }
}
// 之后赋值时直接给已有属性赋值
axios.get('/api/data').then(res => {
  this.info.name = res.data.name;
  this.info.age = res.data.age;
});

• 使用this.$set强制添加响应式属性
  如果没办法提前声明所有属性，可以用Vue提供的$set方法来给对象新增响应式属性，这样Vue会手动触发依赖更新：

axios.get('/api/data').then(res => {
  // 逐个添加属性
  this.$set(this.info, 'name', res.data.name);
  this.$set(this.info, 'age', res.data.age);
  // 如果是批量赋值，可以循环处理
  Object.keys(res.data).forEach(key => {
    this.$set(this.info, key, res.data[key]);
  });
});

• 直接替换整个对象引用
  另一种简单的方式是直接把整个对象替换掉，因为Vue能检测到对象引用的变化，这样会触发整个对象的响应式更新：

axios.get('/api/data').then(res => {
  // 用展开运算符或者Object.assign替换整个对象
  this.info = {...res.data};
  // 或者 this.info = Object.assign({}, this.info, res.data);
});

你之前查阅的Vue2响应式注意事项文档里其实已经提到了这个核心问题——Vue无法检测普通的对象属性添加或删除，所以必须用上述方法来确保属性是响应式的，这样部署到服务器后DOM才能正常更新数据。

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