Vue3 响应式数组异步赋值：最佳实践和技巧

在 Vue3 中，可以使用 'ref' 和 'reactive' 来创建响应式数据。对于数组，通常使用 'reactive' 来创建。

要异步修改响应式数组，可以使用 'await' 关键字等待异步操作完成后再进行赋值操作。例如：

import { reactive } from 'vue';

const state = reactive({
  list: []
});

async function fetchData() {
  const res = await fetch('http://example.com/api/data');
  const data = await res.json();
  // 异步修改响应式数组
  state.list = data;
}

fetchData();

在上面的例子中，'fetchData' 函数会异步获取数据，并在获取到数据后将其赋值给 'state.list' 数组。由于 'state.list' 是响应式的，Vue 会自动更新相关的视图。

注意，在 Vue3 中，不能直接使用索引或 'push' 等方法来修改响应式数组。应该使用 'splice'、'slice' 等方法来修改数组。例如：

// 在索引为 1 的位置插入一个新元素
state.list.splice(1, 0, 'new element');