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` 仍然保持着响应式。

相关问题

vue3: const obj = reactive({})

这是一个使用 Vue 3 的 Composition API 中的 `reactive` 函数来创建响应式对象的示例。`reactive` 函数接收一个普通对象作为参数，返回一个经过处理的响应式对象，可以在模板和组件中使用。

在上述示例中，`const obj = reactive({})` 创建了一个空的响应式对象 `obj`。可以通过 `obj` 对象添加属性或修改属性的值，这些变化将会自动触发重新渲染相关的组件。例如，可以通过 `obj.name = 'Bob'` 来给 `obj` 对象添加一个名为 `name` 的属性，并给其赋值为 `'Bob'`。

vue.runtime.esm.js:620 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: undefined

当你看到Vue应用中出现警告`vue.runtime.esm.js:620 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: undefined`，这意味着你试图将响应式属性（由Vue实例的`reactive`函数创建的对象或数组）设置到一个未定义、null或者是基本类型的值上，这是不允许的，因为响应式系统需要一个数据对象作为起点。

举个例子，假设你有一个这样的场景：

const myValue = undefined;
const obj = Vue.reactive(myValue); // 这会产生警告

在这个例子中，`myValue`是一个未定义的值，所以当你试图使其成为响应式的，Vue就会抛出警告。

解决这个问题的方法通常是确保你初始化的数据不是undefined或null。例如：

let myValue = '';
const obj = Vue.reactive({ value: myValue }); // 使用初始的字符串值

或者，如果你不确定数据何时可用，可以在赋值给响应式对象之前添加一个简单的检查：

let myValue;
if (myValue !== undefined && myValue !== null) {
  const obj = Vue.reactive({ value: myValue });
}

记住，只有通过`new Vue()`实例化后的数据或者Vue的`ref`、`data`、`computed`等特性创建的对象才能变得响应式。