Vue3无法像Vue2一样响应类内部字段更新的原因及解决方案问询

1. Vue2和Vue3出现响应差异的原因 #

• Vue2的响应式基于Object.defineProperty实现，当你把任意对象（包括类实例）放入data选项时，Vue2会递归遍历对象上所有可枚举属性，为每个属性添加getter/setter劫持。你的MyClass实例的field属性会被直接改写为响应式属性，无论在Vue内部还是类内部的定时器中修改field，都会触发setter通知视图更新。
• Vue3的响应式基于Proxy实现，默认仅对**纯普通对象（通过对象字面量、Object.create(null)创建的对象）**做深层响应式转换，类的实例不属于纯普通对象范畴。因此你把MyClass实例放入data时，Vue3只会代理myClass这个外层引用，不会递归处理其内部的field属性。类内部定时器修改this.field时走的是原始属性赋值逻辑，没有触发Proxy的劫持，因此视图不会响应更新。

2. Vue3实现相同效果的方案 #

不需要修改类内部的定时器逻辑，可选择以下可行方案：

方案1：将类内部需要响应的属性声明为ref #

该方案兼容性最好，不需要依赖外层响应式包装，修改类的属性定义即可：

import { ref } from 'vue'

class MyClass {
  // 直接将字段定义为ref类型，自带响应式
  field = ref(0);

  constructor() {
    setInterval(() => {
      this.field.value++;
    }, 1000);
  }
}

export default {
  data() {
    return {
      myClass: new MyClass(),
    };
  },
};

模板不需要修改，Vue会自动解包ref，依然可以写{{ myClass.field }}。

方案2：手动用reactive包裹类实例 #

如果不方便修改类的实现，且类内部没有提前绑定原始实例的this引用，可以用reactive手动包裹生成的类实例，将其转为响应式代理：

import { reactive } from 'vue'

class MyClass {
  field = 0;

  constructor() {
    setInterval(() => {
      this.field++;
    }, 1000);
  }
}

export default {
  data() {
    return {
      myClass: reactive(new MyClass()),
    };
  },
};

注意：你当前示例中的类在constructor里通过箭头函数绑定了原始实例的this，修改的是原始实例的属性，外层Proxy无法监听到该修改，这种场景该方案不生效，优先使用方案1。

方案3：用toRef绑定具体字段 #

如果既不想修改类实现，也不想包裹整个实例，可以在组件内将需要用到的字段单独转为响应式ref：

import { toRef } from 'vue'

class MyClass {
  field = 0;

  constructor() {
    setInterval(() => {
      this.field++;
    }, 1000);
  }
}

export default {
  data() {
    return {
      myClass: new MyClass(),
    };
  },
  computed: {
    field() {
      return toRef(this.myClass, 'field')
    }
  }
};

模板修改为{{ field }}即可正常触发更新。

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