(Vue3) ref和reactive的区别-学习笔记1

今天开始需要做关于Vue3的项目, 会把学习到的知识点总结下来~

ref和reactive是Vue3中两个核心API, 都用于创建响应式数据

下面来看一下这两者的区别: 

1. ref可以包装基础类型, reactive不能用于基础类型

import { ref } from 'vue';

const count = ref(0);
count.value++; // 必须通过 .value 修改

2. 二者对于对象/数组的响应化方式

　　reactive 更适合对象/数组：

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

state.age++; // 直接修改属性即可触发响应

　　ref 也可以用于对象，但需要通过 .value：

const state = ref({ name: 'Alice', age: 25 });
state.value.age++;

3. 二者保持响应性的方式:

　　reactive 解构后仍保持响应性：

const state = reactive({ name: 'Alice', age: 25 });
const { name, age } = state;
age++; // 仍然响应式

　　ref 解构后失去响应性（除非使用 toRefs）：

const state = ref({ name: 'Alice', age: 25 });
const { name, age } = toRefs(state.value);
age.value++; // ✅ 正确响应

4. 模板中二者的调用方式:

　　ref 要写 .value
　　reactive 直接使用属性

const count = ref(0);
const user = reactive({ name: 'Alice' });

return () => (
  <div>
    Count: {count.value} <br />
    Name: {user.name}
  </div>
);

总结: 

特性	ref	reactive
支持基础类型	✅	❌
是否需要 .value	✅	❌
解构后是否响应	❌（需 toRefs）	✅
适用于对象/数组	✅（稍复杂）	✅（更简洁）
模板中使用便利性	略麻烦	更直观
推荐用于逻辑封装	✅	✅
适用场景	单个值、简单状态	复杂对象、表单等