VueJS：如何在非组件环境下订阅reactive对象？

Vue的reactive对象本身没有内置的subscribe方法，但可以通过以下两种低冗余的方式实现订阅需求：

1. 使用官方提供的watch函数 #

如果你是基于@vue/reactivity包在纯JS环境中使用reactive，可以直接导入官方的watch函数来监听对象变化，这是最简洁的方案：

import { reactive, watch } from '@vue/reactivity';

const x = {
  a: [],
  b: 2,
  c: { q: 0 }
};
const y = reactive(x);

// 订阅整个reactive对象的所有变化
watch(y, (newVal, oldVal) => {
  console.log('Something reactive happened', { newVal, oldVal });
});

y.a = [1,2,3]; // 触发订阅回调
y.c.q = 5; // 嵌套属性变化也会触发

如果只想监听特定属性，也可以给watch传一个 getter 函数：

// 只监听y.a的变化
watch(() => y.a, (newVal, oldVal) => {
  console.log('y.a changed:', newVal);
});

2. 封装简易的subscribe函数 #

如果想要更贴近你示例中的subscribe调用方式，可以基于Vue的effect函数封装一个极简版本：

import { reactive, effect } from '@vue/reactivity';

function subscribe(target, callback) {
  // 用effect追踪target的所有依赖，变化时触发回调
  effect(() => {
    // 遍历对象所有属性（包括嵌套）触发依赖追踪
    JSON.stringify(target);
    callback(target);
  });
}

const x = {
  a: [],
  b: 2,
  c: { q: 0 }
};
const y = reactive(x);

subscribe(y, (obj) => {
  console.log('Something reactive happened', obj);
});

y.b = 10; // 触发订阅

注意：这种方式通过JSON.stringify强制遍历所有属性实现深度监听，适合简单场景；复杂场景建议还是用官方watch更灵活。

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