[vue3] 使用reactive声明数组如何正确赋值

一、使用reactive函数声明数组如何正确赋值

const arr = reactive([]);
const load = () => {const res = [2, 3, 4, 5]; //假设请求接口返回的数据// 方法1 失败，直接赋值丢失了响应性// arr = res;// 方法2 这样也是失败// arr.concat(res);// 方法3 可以，但是很麻烦res.forEach(e => {arr.push(e);});
};

问题原因：这是因为 arr = newArr这行代码让arr失去了响应式。vue3 使用proxy，对于对象和数组都不能直接整个赋值。
　
解决方案：

// 这几种办法都可以触发响应性，推荐第一种
// 方案1：创建一个响应式对象，对象的属性是数组
const state = reactive({arr: []
});
state.arr = [1, 2, 3]// 方案2: 使用ref函数
const state = ref([])
state.value = [1, 2, 3]// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])

二、reactive + toRefs+解构如何优雅呈现

let starData = reactive({total: 0,stars: Array<Star>(),
})
const { total, stars } = toRefs(starData)

参考：

Vue3实践指南：使用reactive函数声明数组如何正确赋值响应式、script setup语法糖中toRefs如何优雅呈现、Options API 与 Composition API 如何选择及混用是否对性能有影响、关于 setup 中没有 this 的问题及 setup 的执行时机