reactive() 创建深层响应式对象

reactive() 是 Vue 3 ‌组合式 API‌ 中用于创建‌深层响应式对象‌的方法，专为对象和数组设计。与 ref() 不同，它直接包装对象本身而非其引用

import { reactive } from 'vue';

// 创建响应式对象
const state = reactive({
  count: 0,
  user: { name: 'Alice' }
});

一、核心特性

1、深层响应性

state.count++;          // 触发响应更新
state.user.name = 'Bob'; // 嵌套属性修改也会触发更新

2、自动解包ref

当对象包含ref时，reactive()会自动解包

const age = ref(25);
const state = reactive({ age });
console.log(state.age); // 直接访问 25，无需 .value

3、局限性

仅支持对象、数组：不可用于基本类型（如string,number）

引用绑定：直接替换整个对象会丢失响应性

let state = reactive({ count: 0 });
state = { count: 1 }; // ❌ 响应性丢失

二、响应式丢失场景

1、解构对象

const state = reactive({ x: 1, y: 2 });
const { x, y } = state; // ❌ x, y 失去响应性

修复方法：使用 toRefs

import { toRefs } from 'vue';
const { x, y } = toRefs(state); // ✅ 保持响应性

2、函数返回对象属性

const getStateX = () => state.x; // ❌ 返回普通值，无响应性

修复方法：返回ref

const getStateX = () => toRef(state, 'x'); // ✅ 返回响应式 ref