Vue2迁移Vue3：类实例属性更新无法在模板渲染的解决方法

问题原因 #

Vue2通过Object.defineProperty对data内的对象做递归遍历，将所有属性转为响应式；而Vue3采用Proxy代理整个对象，但自定义类实例的属性是在构造函数中直接赋值给this的，不在Proxy的拦截范围内，所以修改duration无法触发模板更新。

方案1：用reactive包裹类实例 #

把TestClass的实例用reactive包裹，让整个实例成为Proxy代理对象，属性修改会被拦截并触发响应式更新。

修改组件代码：

import { reactive } from 'vue'
import TestClass from './TestClass'

export default {
  name: "TestComponent",
  data() {
    return {
      testObject: reactive(new TestClass({ name: "Test Class", duration: 5 })),
    };
  },
  computed: {
    time() {
      return this.testObject.duration;
    },
  },
};

模板保持不变，此时duration的自增会实时同步到模板。

方案2：在类内部使用响应式API #

直接在TestClass中用ref定义duration，让属性本身具备响应式能力，无论实例在哪里使用，属性更新都会触发响应。

修改TestClass代码：

import { ref } from 'vue'

export default class TestClass {
  constructor(data) {
    this.name = data.name;
    this.duration = ref(data.duration);

    setInterval(() => {
      ++this.duration.value; // ref值需通过.value访问
    }, 1000);
  }
}

组件中computed属性调整为：

computed: {
  time() {
    return this.testObject.duration.value;
  },
},

也可以直接在模板中写{{ testObject.duration }}，Vue3会自动为ref解包。

方案3：手动触发组件更新（不推荐） #

若不想修改类或响应式包裹方式，可在类中传入组件的更新方法，每次修改属性后手动触发更新，但这种方式不符合响应式设计原则，仅作临时方案。

修改TestClass代码：

export default class TestClass {
  constructor(data, updateFn) {
    this.name = data.name;
    this.duration = data.duration;
    this.updateFn = updateFn;

    setInterval(() => {
      ++this.duration;
      this.updateFn();
    }, 1000);
  }
}

组件中传入$forceUpdate：

data() {
  return {
    testObject: new TestClass({ name: "Test Class", duration: 5 }, this.$forceUpdate),
  };
},

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