ref：适合简单数据类型，浅转换为响应数据。

例如以下：

const a=1;

const b=2;

注意：如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换。

reactive：适合复杂数据类型，深入转换响应数据。

例如以下：

const c={

    a:1,

    b:2

}

1、是为了适应不同的写法的人群

2、ref只可以监听简单数据，reactive可以监听所有数据。

ref这种写法简单，但也有弊端，经过尝试，我发现他只能监听一些如数字、字符串、布尔之类的简单数据而如果需要监听如上面代码一样的jsonArray我们在vue2种都会使用$set来进行变更，到了vue3我们终于可以愉快的使用reactive来实现了。

3、使用方式不一样

ref修改数据需要使用这样count.value=xxx的形式，而reactive只需要state.reactiveField=值这样来使用

第二点体现在template中引用时候为reactiveField，不需要state，也就是说我reactive对象里面字段是应该直接使用的

reactive在return时候需要toRefs来转换成响应式对象

toRefs函数

他能将reactive创建的响应式对象，转化成为普通的对象，并且这个对象上的每个节点，都是ref()类型的响应式数据。