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。我怎样才能在 Vue3 中实现类似于工作中的 Vue2 示例？

请注意，我无法在 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

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

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

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();