如何在JS类中隔离Vue组件数据并解决UI不更新问题

我太懂这种明明数据已经改了，但UI却纹丝不动的憋屈感了！咱们先拆解下问题根源，再给你几个实用的解决方案：

为什么会出现这个问题？ #

Vue的响应式系统是在初始化data的时候，给对象的已有属性加上 getter/setter 来实现依赖追踪的。但你的Items类里的save/delete方法是直接用原生JS操作字典的——这种原生的属性新增/删除操作，Vue的响应式系统根本捕捉不到，所以就算data里的items已经变了，UI也不会主动更新。

解决方案一：让Items类的方法主动触发响应式更新 #

既然你已经知道Vue.$set和Vue.$delete，那直接把这两个API集成到你的JS类里就好，这样每次修改字典时都会主动告诉Vue“我变了，快更UI！”：

class Items {
  constructor() {
    this.dict = {};
  }

  // 新增/更新字典项
  save(key, value) {
    // 如果是在Vue组件内部实例化这个类，也可以用this.$set；如果类是独立文件，记得引入Vue
    Vue.set(this.dict, key, value);
  }

  // 删除字典项
  delete(key) {
    Vue.delete(this.dict, key);
  }
}

这样不管你在Vue组件里怎么调用save或delete，UI都会跟着同步更新了，逻辑也最清晰。

解决方案二：把字典包装成Vue响应式对象 #

要是不想改动原来的Items类代码，那可以在组件的mounted钩子中，用Vue.observable把原生字典转换成响应式对象再赋值给data：

mounted() {
  this.itemsInstance = new Items();
  // 把原生字典转成Vue能追踪的响应式对象
  this.items = Vue.observable(this.itemsInstance.dict);
}

这种方式只需要初始化时做一次处理，后续用Items类的原生方法修改字典，Vue也能捕捉到变化了。不过要注意，如果你的类里有直接替换整个dict的操作（比如this.dict = {}），那还是需要额外处理，但只是修改属性的话完全够用。

解决方案三：偷懒式——强制组件更新 #

如果以上两种都不想用，还有个偷懒的办法：给组件加个深度监听，当items的属性变化时，强制组件重新渲染：

watch: {
  items: {
    deep: true, // 深度监听对象内部属性变化
    handler() {
      this.$forceUpdate(); // 强制组件重新渲染
    }
  }
}

不过这个方法性能上不如前两种优雅，因为$forceUpdate会让整个组件重新渲染，适合临时救急或者不想大改代码的场景。

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