Vue Composition API中reactive包裹类实例后内部字段无响应性原因

核心问题出在代码执行顺序、this指向两个核心点上：

1. 代码执行顺序优先级问题 #

你写的const player = reactive(new AnotherClass())执行顺序是固定的：

• 第一步：先完整执行new AnotherClass()的构造函数逻辑，包括给this.audioPlayer赋值、给事件回调绑定this、注册事件监听这一系列操作
• 第二步：才会把构造函数返回的原始未代理的类实例传入reactive，生成响应式代理对象赋值给player
  也就是说你在构造函数里给事件回调绑定的this，是还没被响应式代理的原始类实例，不是后续生成的代理对象。

2. 响应式更新的触发前提 #

Vue的reactive是基于Proxy代理实现的，只有修改代理对象上的属性时，才会触发Proxy的劫持逻辑，通知视图更新。事件触发时调用的onPlaying里的this是提前绑定的原始实例，你修改的是原始实例上的audioPlayer.isPlaying，根本没有走代理的劫持逻辑，Vue自然感知不到属性变更。

额外说明：你平时在组件内通过abc.Func()调用类方法时一切正常，是因为这时候调用方法的主体是响应式代理对象，方法内部的this指向的是代理实例，修改属性会被Proxy劫持到，只有提前在构造函数里绑定了原始实例this的回调（比如事件监听器的回调）才会出现响应式失效的问题。

3. 类内部给audioPlayer加reactive生效的原因 #

你在构造函数里把this.audioPlayer本身用reactive包裹之后，不管是原始实例还是响应式代理实例，访问到的audioPlayer都是同一个响应式代理对象，不管从哪里修改它的属性都会触发响应式更新，所以问题自然解决。

如果你不想在类内部耦合Vue的响应式API，也可以选择两种方案规避问题：

• 不在类的构造函数里绑定事件，把事件绑定逻辑放到类实例被reactive包裹之后再执行，保证回调绑定的this是响应式代理对象
• 用ref包裹类实例而非reactive，ref包裹的对象在任意场景下取值都会自动走代理逻辑，不会出现this指向原始实例的问题

内容的提问来源于stack exchange，提问作者0x115