Vue3 不会像 Vue2 那样对类字段内部更新做出反应

Question

我注意到，在 Vue2 中，您可以将元素绑定到类的属性，并且当此类属性从 Vue 世界之外的某个位置更改时，该元素将会更新，但这在 Vue3 中似乎不可能。

我在这里创建了两个简单的示例来说明我的意思：

Vue2：https://codesandbox.io/s/vue2-6hztv

Vue3：https://codesandbox.io/s/vue3-o2rfn

有一个类有一个内部计时器，它将增加类字段。在 Vue2 中，绑定到 myClass.field 的元素已正确更新，但在 Vue3 中没有任何反应。

我的问题是

<强>1。为什么这里Vue2和Vue3有区别？

<强>2。我怎样才能实现类似 Vue2 示例但在 Vue3 中的效果？

请注意，我无法在 Vue 生命周期方法中运行计时器。类字段需要自行更新。

这是不起作用的 Vue3 代码：

HTML：

<div id="app">{{ myClass.field }}</div>

Javascript：

class MyClass {
  field = 0;

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

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

Answer 1

如此答案中所述，在 Vue 3 中创建代理对象以启用反应性。构造函数中的 this 引用原始类实例而不是代理，因此它不能是响应式的。

解决方案是将类构造函数和期望 this 具有反应性的副作用设置分开。设置方法可以实现流畅的接口模式，使其更易于使用：

class MyClass {
  field = 0;

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

    return this;
  }
}

在选项 API 中它是：

data() {
    return {
      myClass: new MyClass(),
    };
  },
  created() {
    this.myClass.init();
  }

在组合API中它是::

const myClass = reactive(new MyClass()).init();