vue中响应式选择ref还是reactive合适
语法上来说,两者都可以实现响应式,之所以有ref和reactive,是为了更加方便的将不同的数据类型分类处理。
主要区别:reactive只能声明对象/数组,ref可以响应任意数据类型,但是使用时需要加.value进行解包。
但是在使用时,reactive直接赋值非常容易丢失响应式。推荐使用ref。
1.给响应式对象赋值。丢失响应式
javascript
let arr = reactive([1,2])
//直接赋值或使用push等将导致state失去响应
arr=[3,4,5]
let obj =reactive({ id: 0 })
//这种方式失去响应式
obj = {id:1}
//给对应的属性赋值会保持响应式
obj.id = 1;
//使用ref就不会失去响应式,并且.value会提示你这是一个响应式数据
let arr2 = ref([1,2])
arr2.value = [3,4,5]
2.尤其是数组和对象,使用时需要特别注意
解构对象时,要想保持对象的响应式,注意使用toRefs函数,否则会失去响应式
javascript
const obj = reactive({ data: 0 })
//使用toRefs解构,才不会丢失响应式
let { data } = toRefs(obj)