Vue3基础：ref 和reactive的区别及toRefs函数

ref:

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

reactive:

reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了

toRefs:

将普通数据转化为响应式数据对象

小A：多复杂的数据ref才搞不定？我试了数组的重新赋值和数组的push，都是正常的

小B：ref本质上还是reactive，只不过reactive需要传入一个对象，但是有时候我们需要一个基本类型作为响应式，如果用reactive的话就需要reactive({value:xxx})这样传进去，所以vue就提供了ref这种写法，让你不需要手动包装成对象。所以这也是为什么ref包装的响应式对象需要.value才能拿到值的原因。

总结:

reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

使用ref定义基本数据类型,ref也可以定义数组和对象