vue3中对象中的数组改变视图不更新

在Vue3中，当对象中的数组改变时，视图不自动更新是正常的行为。这是因为Vue3使用了Proxy对象来监视数据的变化，而Proxy只能监视到对象本身的属性操作，而无法监视到数组元素的变化。

为了解决这个问题，Vue3提供了一些API来手动触发视图更新。其中，最常用的是reactive函数和toRefs函数。

reactive函数可以将一个对象转换为响应式对象，这样当对象中的属性发生变化时，视图会自动更新。使用reactive函数将对象转换为响应式对象后，可以直接修改数组元素，视图会自动更新。

示例代码如下：

import { reactive } from 'vue'

const state = reactive({
  list: ['apple', 'banana', 'orange']
})

state.list[0] = 'pear' // 视图会自动更新

如果要在模板中使用数组元素作为属性，可以使用toRefs函数将响应式对象的属性转换为ref对象，然后再使用ref对象的value属性。

示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item.value }}
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      list: ['apple', 'banana', 'orange']
    })

    const refs = toRefs(state)

    return {
      ...refs
    }
  }
}
</script>
``