【vue3】reactive不能直接赋值的解决方法

前言

最近比较忙，都没什么时间学习了。
在vue3里，ref和reacitve都可以定义响应式数据，但是两者有所不同。在使用reactive定义复杂结构的响应式数据时，如果你要对其赋值，会丢失其响应性。然后赋值是我们经常进行的操作，那么该怎么解决呢？

方法

1. 改为ref定义

const arr= ref([])
arr.value = [1, 2, 3]

2. push新增数据

const arr = reactive([])
arr.push(...[1, 2, 3])

3.再封装一层数据（推荐！）

const state = reactive({
  arr: []
});

state.arr = [1, 2, 3]

但是这样的话在html模板里，使用数据就得state.arr
所以我们可以用解构将它return出来
但是reactive解构出来的数据会丢失响应性
所以再用torefs()方法为它们添加响应性
最终为：

const state = reactive({
  arr: []
});

state.arr = [1, 2, 3]

return{
  ...toRefs(state),
}