ref是把值类型添加一层包装，使其变成响应式的引用类型的值, reactive则是引用类型的值变成相应式的值, 所以ref和reactive的区别只是在于是否需要添加一层引用包装

本质上

ref(0) --> reactive({value:0})

ref

数据响应式监听。 ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值

reactive

reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了，所以需要用toRefs函数来转化为响应式数据对象

ref对于 基本类型

ref创建出来的数据和以前无关，与js中的基本类型表现一致

let a=1;
let aRef=ref(a);
此时 a与aRef是两个无关的数据
console.log(a,aRef.value); //1,1

a=2
console.log(a,aRef.value); //2,1

aRef.value=3
console.log(a,aRef.value); //2,3

ref 对于引用数据类型

创建出来的数据与以前的数据相关，与js中的引用数据类型表现一致

let obj = { name: "1" };
let stateRef = ref(obj);
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 1
// ref 1

stateRef.value.name = '2';
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 2
// ref 2


obj.name='3'
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 3
// ref 3

注：*toRef数据发生改变, 界面也不会自动更新*