vue3 数组既响应内部元素变化又相应整体变化

Vue3 中的响应式数组可以同时监听数组内部元素的变化和数组的整体变化。具体地说，可以使用 `reactive` 函数创建一个响应式对象，然后在该对象中创建一个数组属性，并将该数组属性传递给 `reactive` 函数，如下所示：

import { reactive } from 'vue';

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

// 监听数组内部元素变化
state.list[0] = 'pear';

// 监听整体变化
state.list.push('grape');

在上面的例子中，当数组 `list` 中的元素发生变化时，Vue3 会自动更新视图，同时，当整个数组 `list` 发生变化时，也会触发视图更新。需要注意的是，Vue3 中的响应式数组使用 Proxy 实现，因此并不支持像 Vue2 中那样的数组变异方法，如 `push`、`pop`、`shift`、`unshift`、`splice`、`sort` 和 `reverse`。如果需要使用这些方法，需要使用 Vue3 提供的特定方法来实现数组变异，并且这些方法也会触发视图更新。