Vue组合API和响应类

Question

在setup中创建如下内容:

const abc = reactive(new AnotherClass())
return {abc}

在组件的后面，我可以通过abc调用该类的一个方法。Func()，或者访问一些字段，一切似乎都很好。在这里，我们将想象这种情况:在类构造函数中，我们创建eventListener，它侦听某些内容，然后为其中一个类字段设置true或false。然后出现了一个问题:如果你在处理程序应该改变的组件中显示这个字段，你可以看到类字段不是响应的，也就是说，当处理程序明确地改变了字段的值时，这在组件中是不可见的。只有当你也为类中的字段写了reactive

时，字段才是响应性的。为什么?我让全班都反应起来。为什么我还需要在类内编写ref和reactive ?组件代码:

<template>
<div style="width: 200px; height: 200px">{{player.audioPlayer.isPlaying}}</div>
</template>
setup(props) {
const player = reactive(new AnotherClass())
return {player}
},

类:

private _onPlaying = this.onPlaying.bind(this)
constructor() {
this.audioPlayer = {
active: false,
initialized: false,
element: new Audio(''),
isPlaying: false,
currentPlaying: {
playlist: [],
index: 0
}
}
this.audioPlayer = reactive(this.audioPlayer) // if comment this, we don't see any changes in component after onPlaying set this to true
this.init()
}

private init(){
this.audioPlayer.element.addEventListener('playing', this._onPlaying)
this.audioPlayer.initialized = true
}

private onPlaying() {
this.audioPlayer.isPlaying = true
}

Answer 1

reactive创建了一个原始实例的代理，因此当在响应性代理对象上调用方法时，它们将作为this接收它。

当在构造函数中设置侦听器时，它们被硬编码为使用原始的非反应性this。

为了使一个类不知道Vue的响应性助手，它应该被设计成允许在构造函数中使用this来设置初始数据，而不是副作用。回调函数不应该在构造函数中绑定到this，这包括类字段，因为它们是构造函数体的语法糖。

必须是:

constructor() {
this.audioPlayer = {...};
// this.init()
}

init(){
this.audioPlayer.element.addEventListener('playing', () => this.onPlaying())
this.audioPlayer.initialized = true
}

和使用方式:

const player = reactive(new AnotherClass())
player.init();