vue中数据响应式选择ref还是reactive?

vue中响应式选择ref还是reactive合适

语法上来说，两者都可以实现响应式，之所以有ref和reactive，是为了更加方便的将不同的数据类型分类处理。

主要区别：reactive只能声明对象/数组，ref可以响应任意数据类型，但是使用时需要加.value进行解包。

但是在使用时，reactive直接赋值非常容易丢失响应式。推荐使用ref。

1.给响应式对象赋值。丢失响应式

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函数，否则会失去响应式

const obj = reactive({ data: 0 })
//使用toRefs解构,才不会丢失响应式
let { data } = toRefs(obj)