Vue 3中赋值数组的方法介绍·将新的数组赋值给这个数组·例如表单数据处理动态添加或删除表单项

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

在Vue 3中处理数组数据，你可以采用多种方法。下面我会用通俗易懂的方式，一步步带你看懂这些方法。

直接赋值，顾名思义，就是直接给数组赋一个新的值。这样做简单快捷。

例如：

在`data`函数中定义数组：

data() {
  return {
    myArray: []
  }
}

在方法中直接赋值：

methods: {
  updateArray() {
    this.myArray = [1, 2, 3];
  }
}

Vue 3提供了很多数组操作的方法，如`push`、`splice`和`concat`，可以用来添加、删除或修改数组元素。

例如，使用`push`添加元素：

methods: {
  addElement() {
    this.myArray.push(4);
  }
}

Vue 3的Composition API允许你使用`reactive`和`ref`来创建响应式的数组。

API	作用
reactive	将一个对象或数组变成响应式的。
ref	创建一个响应式引用。

例如，使用`reactive`创建响应式数组：

data() {
  return {
    myArray: reactive([1, 2, 3])
  }
}

这些方法在处理表单数据、列表渲染和API数据处理等方面都非常实用。

例如：

具体应用如下：

methods: {
  fetchData() {
    axios.get('/api/data').then(response => {
      this.myArray = response.data;
    });
  }
}

选择合适的方法，利用响应式系统，保持代码简洁，是高效处理Vue 3中数组数据的关键。

以下是一些额外的建议：

Vue 3中赋值数组的方法介绍·将新的数组赋值给这个数组·例如 表单数据处理动态添加或删除表单项