vue3中 ref 和 reactive 的区别介绍

ref 和 reactive 区别

ref 和 reactive 都是用来定义响应式数据的。

ref允许我们创建一个任意类型的响应式的ref对象，在使用时需要带上.value
在模板中使用ref对象时，假如ref位于顶层，就不需要使用value，它会自动解包
但如果ref对象是作为一个属性声明于对象之中，在模板中进行运算时仍然要使用.value

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

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

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

ref操作数据需要.value，template模板中不需要

reactive都不需要.value

用 reactive() 创建的响应式对象，整个对象是响应式的，而对象里的每一项都是普通的值，当你把它用展开运算符展开后，整个对象的普通值都不是响应式的

而用 ref() 创建的响应式的值，本身就是响应式的，并不依赖于其他对象

所以需要展开 reactive() 创建的响应式对象，又不想让他们失去响应式特点的时候，就需要用 toRefs() 将它进行转换

通常使用reactive()来创建一个响应式的对象或数组，这样的对象或数组状态都是默认深层响应式的，无论嵌套多深，都能跟踪到。
但他也有局限性，就是只对 对象类型有效，对基本数据类型无效
并且假如用一个新对象替换了原来的旧对象，那么原来的旧对象会失去响应性

两者区别：

1、ref多用来定义基本数据类型（也可以定义对象，内部会自动通过reactive转为代理对象），而 reactive只能用来定义对象数组类型

2、ref操作数据需要.value，reactive操作数据不需要.value

3、ref通过Object.defineProperty()的get和set来实现响应式， reactive通过Proxy来实现响应式，并通过Reflect操作源对象内部的数据