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

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

 

方法
1. 改为ref定义
const arr= ref([])
arr.value = [1, 2, 3]
1
2
2. push新增数据
const arr = reactive([])
arr.push(...[1, 2, 3])
1
2
3.再封装一层数据（推荐！）
const state = reactive({
arr: []
});

state.arr = [1, 2, 3]