vue3 setup中数组更新后视图不更新

在Vue 3中，`setup`函数中返回的响应式对象使用的是`ref`和`reactive`。当你在`setup`中创建响应式数组时，你需要使用`reactive`而不是`ref`。因为`ref`是用来包装单一的值，而不是数组。

如果你使用了`reactive`来创建响应式数组，但是视图在数组更新后仍然没有更新，可能是因为你直接修改了数组的某个元素，而没有使用Vue提供的修改数组的方法，比如`push`、`pop`、`shift`、`unshift`、`splice`等。这些方法会触发Vue的响应式系统来更新视图。

如果你不想使用Vue提供的方法来修改数组，你可以手动调用`trigger`方法来通知Vue更新视图，例如：

import { reactive, trigger } from 'vue'

const state = reactive({
  list: ['item1', 'item2', 'item3']
})

function updateList() {
  state.list[0] = 'new item'
  trigger(state, 'list')
}

在上面的示例中，我们手动修改了数组的第一个元素，然后调用了`trigger`方法来通知Vue更新`list`这个响应式数组的视图。

另外，还需要注意的是，如果你在`setup`函数中使用了`computed`来计算数组的值，那么你需要将该`computed`放在数组的依赖项中，以确保数组更新时计算属性能够重新计算并更新视图。例如：

import { reactive, computed } from 'vue'

const state = reactive({
  list: ['item1', 'item2', 'item3'],
  count: 0
})

const computedList = computed(() => {
  state.count // 将count放在依赖项中
  return state.list.map(item => item.toUpperCase())
})

上面的示例中，我们将`count`放在了`computedList`的依赖项中，这样当数组更新时，`computedList`会重新计算并更新视图。