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()类型的响应式数据。