vue3实战之数组的响应式

vue2的数组响应式需要使用this.$set，

实现数组元素的变化更新，vue2只是改写了数组的七个方法（'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'），数组元素变化并没有改写的方法，所以只能this.$set

vue3使用proxy实现响应式，从接口获取数据赋值给数组时发现，数据更新了但视图没有更新，主要是proxy相当于是一个代理对象，是return出去的，页面未更新是因为改变的是变量，而不是return出去的对象数据。所以导致变量更改了视图没有更新

有两种解决方案

1.使用ref，需要使用.value

let list = ref([1, 3, 5, 7, 9])
list.value.forEach(item => console.log(item)) // 正确方式
list.forEach(item => console.log(item)) // 错误方式

2.使用reactive，

let list = reactive({arr: [xx,xx,xx]});
list.arr //使用方式

遇到的报错，如何获取vueX的变量，vue3写法,这里是vue3将其变成响应式数据所以需要.value

//报错分析，这里是vue3将其变成响应式数据所以需要.value
TS2538: Type 'ComputedRef<any>' cannot be used as an index type.
//报错分析，如果定义成const，在setup里面想修改就会报错
TS2588: Cannot assign to 'colorList' because it is a constant.

//这里使用let
let skinId = computed(()=>store.state.skin.skinId);
//在setup里面使用
skinId.value