Vue3不会以与Vue2相同的方式对类字段内部更新作出反应
Vue3不会以与Vue2相同的方式对类字段内部更新作出反应
提问于 2021-12-01 12:22:25
我已经注意到，在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(),
};
},
};回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-01 12:44:41
正如在this answer中所解释的，代理对象是在Vue 3中创建的，以启用反应性。构造函数中的this指的是原始类实例，而不是代理，因此它不能是反应性的。
解决方案是将类构造函数与预期this是反应性的副作用的设置分开。安装方法可以实现fluent接口模式，使其更易于使用：
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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70184129
复制相关文章
相似问题
腾讯云开发者
