Vue3 中ref 对比 reactive

创建数据类型：

ref：基本类型、对象类型；创建的是响应式引用

reactive：对象类型; 创建的是响应式对象

区别：

ref创建的变量必须使用.value；reactive不需要，可直接使用;

reactive重新分配一个新对象，会失去响应性,；ref不会;

❌以下为错误做法

let state = reactive({ name: 'Alice', age: 25 });state = {name: 'Tom',age: 18}; // 新对象不再是响应式！

✅正确作答：

1.使用Object.assign替换整体保持响应性

const state = reactive({ name: 'Alice',age: 25});Object.assign(state ,{name: 'Tom',age: 18});

2.使用toRefs保持响应性

const state = reactive({ name: 'Alice',age: 25});const { name, age } = toRefs(state);//通过toRefs将state对象中的n个属性批量取出，且依然保持响应式的能力name.value = 'Tom';age.value = 18;

​