vue3 ref 和reactive的区别

好问题！这俩在 Vue 3 里面经常一起用，但其实定位和特点不一样，我给你清晰地对比一下：

JavaScript 区分 基本类型 和 引用类型

• 基本类型：number、string、boolean、undefined、null、symbol、bigint
• 引用类型：object、array、function

基本类型是值存储，操作的是值本身,不能直接通过 Proxy 劫持。
引用类型是引用存储，操作的是地址引用,可以通过 Proxy 直接劫持。

---

特性	ref	reactive
作用对象	可以是基本类型（比如 number、string）或对象	只能是对象、数组等复杂结构
响应式包装	把值包在 .value 属性里	直接对对象本身做代理，不需要 .value
内部实现	ref 本质是 { value: 实际值 }，是一个对象包裹器	reactive 本质是 Proxy 代理原对象
使用场景	简单的单个值，比如数字、字符串、布尔	多属性组成的大对象、数组
取值方式	.value	直接访问属性名
适合用在	标量、DOM元素引用、简单数据	结构化数据、表单对象、列表数据

---

🌟 举个例子更直观：

1. ref

import { ref } from 'vue';

const count = ref(0);

// 使用时
console.log(count.value); // 0
count.value++;

特点：

• count 本身是一个对象 { value: 0 }
• 真正的数值在 count.value 里
• ref 是给基本数据类型搞响应式的（也可以包对象，但要手动 .value）

---

2. reactive

import { reactive } from 'vue';

const user = reactive({
  name: '小明',
  age: 18
});

// 使用时
console.log(user.name); // 小明
user.age++;

特点：

• user 是一个被 Proxy 包装过的对象
• 直接访问属性就可以，不用 .value
• reactive 是给对象、数组搞响应式的

---

💡 那 ref 和 reactive 可以互转吗？

可以！

• 如果你拿 ref 包一个对象，访问时可以用 ref.value
• 如果你想让 reactive 对象里的单个属性变成 ref，可以用 toRefs：

import { reactive, toRefs } from 'vue';

const user = reactive({ name: '小明', age: 18 });
const { name, age } = toRefs(user);

// 这样 name 和 age 都是 ref 了
console.log(name.value); // 小明

---

✨ 总结一句话记住：

✅ ref：给基本类型搞响应式（标量用的，访问用 .value）

✅ reactive：给对象/数组搞响应式（直接访问属性）

---