Vue中如何使ES6类对象的属性具备响应式？

我有一个用于存储和管理数据的ES6类，使用代码如下：

import DataManager from "./components/data-manager.js";
export default {
  ...
  data() {
    return {
      dataModel: null
    }
  },
  beforeMount() {
    this.dataModel = new DataManager();
  },
  computed: {
    datas() {
      return this.dataModel.myProperty
    }
  },
  ...
}

但目前存在响应式问题，对dataModel所做的任何修改都无法触发视图重新渲染。请问如何使该类的属性具备响应式？感谢。

解决方案 #

这个问题的核心在于：Vue的响应式系统只能追踪它自己"管理"的对象。你直接实例化的DataManager对象是普通的JS对象，没有被Vue的响应式拦截器（Vue2用Object.defineProperty，Vue3用Proxy）处理，所以修改它的属性时，Vue根本不知道发生了变化，自然不会触发视图更新。

下面分两种Vue版本给出具体解决方法：

如果你用的是Vue3 #

Vue3提供了reactive API，可以直接把普通对象转换成响应式对象。只需要在实例化DataManager时用reactive包裹一下就行：

// 先导入reactive
import { reactive } from 'vue';
import DataManager from "./components/data-manager.js";
export default {
  ...
  data() {
    return {
      dataModel: null
    }
  },
  beforeMount() {
    // 用reactive包裹实例，让整个对象变成响应式
    this.dataModel = reactive(new DataManager());
  },
  computed: {
    datas() {
      return this.dataModel.myProperty
    }
  },
  ...
}

这样之后，你修改dataModel上的任何属性（包括新增属性），Vue都会自动追踪变化并触发视图更新。

如果你用的是Vue2 #

Vue2里可以用Vue.observable方法来创建响应式对象，用法和Vue3的reactive类似：

import DataManager from "./components/data-manager.js";
export default {
  ...
  data() {
    return {
      dataModel: null
    }
  },
  beforeMount() {
    // 用Vue.observable把实例变成响应式
    this.dataModel = Vue.observable(new DataManager());
  },
  computed: {
    datas() {
      return this.dataModel.myProperty
    }
  },
  ...
}

⚠️ 注意：Vue2的响应式系统有个局限——如果要给dataModel新增之前不存在的属性，必须用this.$set(this.dataModel, '新属性名', 属性值)来添加，不然新增的属性不会被追踪。

额外小提示 #

如果你的DataManager类内部有很多复杂的状态管理逻辑，也可以考虑把它改造成Vue的ref或者直接集成到Vuex/Pinia里，这样状态管理会更规范，响应式也能得到保障。

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