ref和reactive的区别？
1.1 基本概念
ref 和 reactive 是 vue 3 数据响应式中非常重要的两个概念
- reactive 用于处理对象类型的数据响应式，底层采用的是 new Proxy()
- ref 通常用于处理单值的响应式，ref 主要解决原始值的响应式问题，底层采用的是 Object.defineProperty()实现的
| reactive | ref |
|---|---|
| ❌只支持对象和数组(引用数据类型) | ✅支持基本数据类型+引用数据类型 |
✅在 <script> 和 <template> 中无差别使用 |
❌在 <script> 和 <template> 使用方式不同(script中要.value) |
| ❌重新分配一个新对象会丢失响应性 | ✅重新分配一个新对象不会失去响应 |
| 能直接访问属性 | 需要使用 .value 访问属性 |
| ❌将对象传入函数时,失去响应 | ✅传入函数时,不会失去响应 |
| ❌解构时会丢失响应性,需使用toRefs | ❌解构对象时会丢失响应性,需使用toRefs |
ON THIS PAGE