在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来访问值