Vue3中ref与reactive的区别

在vue3中，如果我们想让数据在页面中响应式地进行更新，一般会用到ref()和reactive()这两个函数，既然功能如此相似，那么这两个函数究竟有什么区别呢？

1.ref

ref允许我们创建一个任意类型的响应式的ref对象，在使用时需要带上.value，例如下面：

const a = ref(1)
a.value++
console.log(a.value) //2

const b = ref({count:1})
b.value.count++
console.log(b.value.count) //2
在模板中使用ref对象时，假如ref位于顶层，那么就不需要使用value，也就是说，它会自动解包，但如果ref对象是作为一个属性声明于对象之中，在模板中进行运算时仍然要使用.value，例如下面：

{{ a }}

//页面显示1，自动解包

{{ b.count }}

//页面显示2，作为插值自动解包

{{ b.count + 1 }}

//页面显示[object Object]1

{{ b.count.value + 1 }}

//页面显示3 可以看到，直接在页面中使用b.count计算是无法正常显示的，因为b.count本身是一个ref对象，并不位于顶层，所以没有自动解包

2.reactive

我们通常使用reactive()来创建一个响应式的对象或数组，这样的对象或数组状态都是默认深层响应式的，也就是说

import { reactive } from ‘vue’

const a = reactive({
count:1
})
a.count++
console.log(a.count) //2

const b = reactive({
obj:{
arr:[‘Alice’,‘Bob’,‘Carol’]
}
})
b.obj.arr.push(‘Dave’)
console.log(b.obj.arr) //[‘Alice’,‘Bob’,‘Carol’,‘Dave’]
不管他们嵌套多深，都可以被追踪到，例如下面：

reactive也有一些局限性，那就是仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的原始类型无效（见官网），并且假如用一个新对象替换了原来的旧对象，那么原来的旧对象会失去响应性，例如下面：

const a = reactive({
count:1
})
a = reactive({
count:2
}) //{ count: 1 }失去了响应性

3.两者的异同

相同点：创建响应式对象

不同点：

ref可接受对象类型也可以接受基本类型，而reactive只能接收对象或数组等复杂类型

ref创建的数据返回类型为RefImpl ，而RefImpl._value是一个 reactive 代理的原始对象，reactive创建的数据返回类型为Proxy

ref使用.value来访问值