Vue3 不以与 Vue2 相同的方式对 class 字段内部更新作出反应

Question

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

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

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

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

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

我的问题是

1.为什么这里Vue2和Vue3有区别？

2。我怎样才能在 Vue3 中实现类似于工作 Vue2 示例的东西？

请注意，我不能运行 Vue 生命周期方法中的计时器。 class字段需要自行更新

这是不起作用的 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 指的是原始 class 实例而不是代理，因此它不能是反应式的。

解决方案是将 class 构造函数和期望 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();

Vue3 不以与 Vue2 相同的方式对 class 字段内部更新作出反应

Vue3 does not react to class field internal updates in the same way as Vue2

javascript

vue.js

vuejs2

vuejs3