vue3 setup 更改数组并未更新视图

Vue3中的`setup`函数是用来编写组件逻辑的地方，它是Vue3中新增的一种组件编写方式。在`setup`函数中，我们需要返回一个对象，该对象包含Vue实例中所需的各种数据、方法等。

当使用`setup`函数来编写组件逻辑时，我们会发现在对数组进行更改后，并没有自动更新视图。这是由于`setup`函数中无法像以前的`data`选项那样通过Vue的响应式系统进行自动更新。

为了解决这个问题，我们可以使用Vue3中提供的`reactive`函数将数组包裹起来，将其转为响应式的对象。这样就可以实现在更改数组时自动更新视图。

具体实现步骤如下：

1. 在`setup`函数中引入`reactive`函数： `import { reactive } from 'vue'`。
2. 使用`reactive`函数将数组包裹起来，生成响应式的对象： `const reactiveArray = reactive([])`。
3. 在组件逻辑中使用`reactiveArray`来操作数组。

例如，如果我们要向数组中添加一个新的元素，可以这样操作：

reactiveArray.push(newElement);

然后，我们会发现数组的更改会自动更新到视图上。

总结一下，Vue3的`setup`函数在更改数组时并不会自动更新视图。为了解决这个问题，我们需要使用`reactive`函数将数组转为响应式的对象，从而实现数组更新后自动更新视图的效果。