Vue3的CompositionAPI 创建响应式对象的方式：

• reactive
• ref
• toRef
• toRefs

---

reactive

reactive 方法 根据传入的对象 ，创建返回一个深度响应式对象。响应式对象看起来和传入的对象一样，但是，响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属性也会触发响应式。

重点：

• reactive 只能 给对象添加响应式，对于值类型，比如String，Number，Boolean，Symbol无能为力。

• 不能通过 …state 方式结构，这样会丢失响应式。下面这种方式是错误的

//注意这里不能通过 ...state 方式结构，这样会丢失响应式。
 return {
     ...state  
 }

ref

上面我们提到 reactive 只能给对象，数组 添加响应式，如果想给值类型(String，Number，Boolean，Symbol)添加响应式，就要用到ref，所以ref作用如下：

• 生成值类型响应式数据
• 通过.vue值修改
• 生成对象和数组类型的响应式对象**(对象和数组一般会选用reactive方式，比较便捷)**

toRef

• 针对一个响应式对象（reactive 封装）的 prop（属性）创建一个ref，且保持响应式
• 两者 保持引用关系

toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

• 将响应式对象（reactive封装）转成普通对象
• 对象的每个属性(Prop)都是对应的ref
• 两者保持引用关系

如何选择 ref 和 reactive？建议

1. 基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref
2. 引用类型值(Object、Array)使用 reactive

使用toRefs(state)方式返回

注意reactive封装的响应式对象，不要通过解构的方式return，这是不具有响应式的。可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

const state = reactive({...});
return {...state}; // 这种方式将丢失响应式，是一种错误的方式
return toRefs(state); // works

const data: DataProps = reactive({
  count: 0,
  increase: () => {
    data.count++;
  },
  double: computed(() => data.count * 2),
});
const refData = toRefs(data);
return {
  ...refData,
};

参考文章

Vue3： reactive, ref,toRef,toRefs用法和区别