vue3中ref和reactive的区别

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

?

1 2 3 4

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

　　

?

1 2 3 4

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

 

两者区别：

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

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

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