Vue3+Action Cable：类内部修改的属性无法被watch监测怎么办？

问题核心在于：Vue3的响应式依赖Proxy代理实现，但第三方类（比如Action Cable的Connection、你测试用的TestClass）内部直接修改自身属性时，走的是原生类的属性赋值逻辑，没有经过Vue的响应式代理拦截——除非属性修改操作是在实例被Vue响应式包装之后触发的（比如你第二个测试用例中，在ref包装实例后调用run()，此时赋值会触发Proxy的setter，watch才能生效）。

下面是几种可行的解决办法：

方法1：直接订阅Action Cable官方事件（最推荐） #

Action Cable本身提供了connected、disconnected等原生事件，这是官方设计的状态监听方式，无需依赖Vue响应式，稳定性最高：

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import consumer from '@/path/to/your/action-cable-consumer'

// 定义事件回调
const handleConnected = () => {
  console.log('WebSocket 已连接')
  // 在这里更新组件内的状态或执行业务逻辑
}
const handleDisconnected = () => {
  console.log('WebSocket 已断开')
  // 在这里更新组件内的状态或执行业务逻辑
}

onMounted(() => {
  // 绑定连接状态事件
  consumer.connection.addEventListener('connected', handleConnected)
  consumer.connection.addEventListener('disconnected', handleDisconnected)

  // 或者通过订阅频道的回调监听
  consumer.subscriptions.create('YourTargetChannel', {
    connected: handleConnected,
    disconnected: handleDisconnected
  })
})

onUnmounted(() => {
  // 组件销毁时移除监听，避免内存泄漏
  consumer.connection.removeEventListener('connected', handleConnected)
  consumer.connection.removeEventListener('disconnected', handleDisconnected)
})
</script>

方法2：将类实例属性转为Vue响应式对象 #

如果一定要用Vue的watch监听状态，可以把类实例包装为Vue响应式对象，确保属性赋值经过Proxy拦截：

针对你的测试代码，修改如下：

<script setup lang="ts">
import { TestClass } from "@/core/test/testClass";
import { reactive, watch, toRefs } from 'vue'

// 先创建类实例，再转为响应式对象
const testInstance = new TestClass()
const test = reactive(testInstance)
// 或者单独提取state属性为响应式引用
const { state } = toRefs(test)

watch(() => state.value, (newVal) => {
  console.log('watch fired', newVal)
})
</script>

注意：如果类的属性修改逻辑（比如setTimeout）写在构造函数里，此时实例还未被Vue响应式包装，第一次修改仍然无法触发watch。这种情况下需要把异步修改逻辑放到实例方法中（比如你第二个测试用例的run()），并在响应式包装后调用该方法。

方法3：自定义响应式包装类 #

如果需要复用监听逻辑，可以封装一个包装类，把第三方类的属性代理为Vue响应式：

// 封装Action Cable连接的响应式包装
import { reactive } from 'vue'
import consumer from '@/path/to/your/action-cable-consumer'

export function createReactiveConnection() {
  const connection = reactive(consumer.connection)

  // 同步Action Cable原生事件到响应式属性
  consumer.connection.addEventListener('connected', () => {
    connection.disconnected = false
  })
  consumer.connection.addEventListener('disconnected', () => {
    connection.disconnected = true
  })

  return connection
}

// 组件中使用
<script setup lang="ts">
import { watch } from 'vue'
import { createReactiveConnection } from '@/utils/reactive-cable'

const connection = createReactiveConnection()
watch(() => connection.disconnected, (isDisconnected) => {
  console.log('连接状态：', isDisconnected ? '已断开' : '已连接')
})
</script>

内容的提问来源于stack exchange，提问作者Anton Ivanov