vue3: const obj = reactive({}); obj = reactive({a:1}); 页面不渲染内容

在 Vue 3 的 Composition API 中，使用 `reactive` 函数创建的对象是响应式的，这意味着当对象的属性被修改时，相关的组件会自动重新渲染。但是，当你将一个新的对象赋值给一个使用 `reactive` 函数创建的对象时，这个对象就会丢失响应式。

在你的示例中，`const obj = reactive({})` 创建了一个空的响应式对象 `obj`。但是，当你执行 `obj = reactive({a:1})` 时，你将一个新的经过 `reactive` 函数处理的对象赋值给了 `obj`。虽然这个新对象是响应式的，但是它并不是之前的 `obj`，因此相关的组件不会重新渲染。

如果你想修改一个使用 `reactive` 函数创建的响应式对象的属性，应该直接修改它的属性而不是将一个新的对象赋值给它。如果你需要替换整个对象，可以使用 `Object.assign` 或者 `spread` 运算符来将新旧对象的属性合并到一起。

例如，你可以这样来修改 `obj` 的属性：

// 修改属性
obj.a = 1

// 合并对象
obj = Object.assign(obj, {a: 1})
// 或者
obj = {...obj, a: 1}

这样做会触发组件的重新渲染，并且 `obj` 仍然保持着响应式。