Vue3中如何响应式暴露第三方库的内部状态？

在Vue3环境封装自身维护内部状态的第三方库时，如果该库只通过函数调用的方式暴露内部状态，怎么实现对这个状态的响应式监听？我试了用computed()方法，但计算函数只在初始渲染时执行一次，之后不会再触发。

问题代码示例 #

<template>
  <ul>
    <li v-for="thing in things" :key="thing.id">{{ thing.name }}</li>
  </ul>
</template>

<script>
import { computed } from 'vue';
import ExampleLibrary from '@somethirdparty/example-library';

export default {
  setup() {
    const instance = ExampleLibrary();

    const things = computed(() => {
      // 该计算函数仅触发一次，如何响应式暴露instance.getThings()的结果？
      return instance.getThings();
    });

    return {
      things
    };
  }
};
</script>

注：实际使用的库为Uppy，需监听的函数是getFiles，此处以通用场景提问

解决方案 #

方法1：利用第三方库的事件系统（推荐） #

大部分成熟第三方库（比如Uppy）都会提供事件订阅机制，当内部状态变化时触发对应事件。我们可以在事件回调里手动更新Vue的响应式状态：

<template>
  <ul>
    <li v-for="thing in things" :key="thing.id">{{ thing.name }}</li>
  </ul>
</template>

<script>
import { ref, onUnmounted } from 'vue';
import ExampleLibrary from '@somethirdparty/example-library';

export default {
  setup() {
    const instance = ExampleLibrary();
    // 初始化响应式状态
    const things = ref(instance.getThings());

    // 订阅第三方库的状态变更事件（需替换为目标库实际提供的事件名）
    const handleUpdate = () => {
      things.value = instance.getThings();
    };
    instance.on('thingsUpdated', handleUpdate);

    // 组件卸载时取消订阅，避免内存泄漏
    onUnmounted(() => {
      instance.off('thingsUpdated', handleUpdate);
    });

    return {
      things
    };
  }
};
</script>

针对Uppy的具体场景，它会在文件添加/移除时触发file-added、file-removed等事件，可监听这些事件更新状态：

// Uppy专属事件监听示例
instance.on('file-added', () => {
  things.value = instance.getFiles();
});
instance.on('file-removed', () => {
  things.value = instance.getFiles();
});

方法2：轮询（备选，仅无事件系统时使用） #

如果第三方库未提供事件机制，可通过轮询定时检查状态变化：

<template>
  <ul>
    <li v-for="thing in things" :key="thing.id">{{ thing.name }}</li>
  </ul>
</template>

<script>
import { ref, onUnmounted } from 'vue';
import ExampleLibrary from '@somethirdparty/example-library';

export default {
  setup() {
    const instance = ExampleLibrary();
    const things = ref(instance.getThings());

    // 每500ms检查一次状态（可根据需求调整间隔）
    const intervalId = setInterval(() => {
      const newThings = instance.getThings();
      // 简单对比状态是否变化，避免不必要更新（可根据数据结构优化对比逻辑）
      if (JSON.stringify(newThings) !== JSON.stringify(things.value)) {
        things.value = newThings;
      }
    }, 500);

    // 组件卸载时清除定时器
    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      things
    };
  }
};
</script>

注意：轮询会带来一定性能开销，建议根据实际数据结构优化对比逻辑，尽量避免使用JSON.stringify这类高开销的方式。

为什么之前的computed不生效？ #

computed的响应式依赖追踪基于Vue自身的响应式对象，而第三方库的getThings()返回的是普通对象，Vue无法感知到第三方库内部状态的变化，因此计算函数只会执行一次，不会自动更新。

内容的提问来源于stack exchange，提问作者Collin Allen