vue3中的reactive和ref的区别

一、相同点：
两者都是用来定义响应式数据的；
二、不同：

reactive：
（1）它的响应式是更深层次的，底层是将传入的数据包装成一个proxy；
（2）推荐去定义复杂的数据类型； 参数必须是对象或者数组，如果想要使用reactive让某个数值变成响应式，要在外层包裹一个对象{}； 如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs
ref：
（1）函数参数可以是基本数据类型，也可以接受对象类型；
（2）如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换；
（3）在template中访问，系统会自动添加.value;在js中需要手动.value；

---

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