如何让Vue 3实现外部JavaScript库状态的响应式？

问题场景 #

部分状态由外部JS库管理，需转为Vue响应式以在模板中使用，该状态会在后台自动变更（如网络连接变化触发）。以Counter类为例：

class Counter {
  _val = 0;

  get val() { return this._val }

  increment() { this._val++ } 
}

需要在模板中展示Counter.val，但不会主动调用Counter.increment，状态变更完全由外部控制。

已尝试的无效方案 #

• 常规ref/reactive：外部直接修改原生Counter实例，Vue代理对象无法感知变化，视图不更新。
• shallowRef：Vue文档要求"外部状态变化时替换ref的值触发更新"，但无法预知状态变更时机，且不想通过轮询检测。

可行解决方案 #

方案1：劫持状态属性的变更触发更新 #

通过重写Counter实例的属性访问器，在状态变化时手动触发Vue的响应式更新：

import { shallowRef, triggerRef } from 'vue';

const counter = new Counter();
let originalVal = counter._val;

// 劫持_val的setter，值变化时触发Vue更新
Object.defineProperty(counter, '_val', {
  get() {
    return originalVal;
  },
  set(newVal) {
    originalVal = newVal;
    triggerRef(counterRef);
  }
});

// 创建指向counter的shallowRef
const counterRef = shallowRef(counter);

模板中直接使用：

<template>
  <div>{{ counterRef.val }}</div>
</template>

当外部调用counter.increment()修改_val时，setter会触发triggerRef，通知Vue更新视图。

方案2：用Proxy包装外部实例（无侵入式） #

如果不想修改原类的属性，可通过Proxy拦截状态修改：

import { shallowRef, triggerRef } from 'vue';

const counter = new Counter();
const counterRef = shallowRef(
  new Proxy(counter, {
    set(target, prop, value) {
      // 拦截_val的修改
      if (prop === '_val') {
        target[prop] = value;
        triggerRef(counterRef);
        return true;
      }
      return Reflect.set(target, prop, value);
    }
  })
);

此方法无需改动原Counter类代码，通过代理实现状态变更的监听与更新触发。

方案3：优先利用外部库的事件通知（最优） #

如果外部库支持状态变更事件（如change、update事件），直接监听事件并触发更新：

import { shallowRef, triggerRef } from 'vue';

const counter = new Counter();
const counterRef = shallowRef(counter);

// 假设外部库有onChange事件
counter.onChange(() => {
  triggerRef(counterRef);
});

这是最优雅的方式，无需劫持属性，完全依赖外部库的原生通知机制。

内容的提问来源于stack exchange，提问作者Alexander Groß