vue 数组添加数据方式

下面是“Vue 数组添加数据方式”完整攻略。

前置知识：

在了解Vue中的数组添加数据方式之前，我们需要了解Vue中的响应式原理。Vue在渲染页面时，会做一个数据变更监听，当数据发生变化时，它会尝试重新渲染页面。数组在JS中是通过push和pop等方法改变数据，但这些方法不会触发数组的变更监听。因为这个原因，Vue提供了一些可以触发变更监听的数组方法。

通过Vue提供的 $set方法添加数组元素

如果要添加一个新元素到数组中，我们可以直接使用JavaScript内置的方法，无需特别处理。但是，如果要在Vue的响应式系统中更新数组，我们则需要使用Vue提供的$set方法。示例代码如下：

this.$set(array, indexOfElement, newValue);

其中array是待添加元素的数组，indexOfElement是要添加的元素在数组中的位置，newValue是要添加的新元素，我们还可以使用ES6的展开运算符...将两个数组合并：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
this.array = [...array1, ...array2];

通过Vue提供的 $push方法添加数组元素

另一种添加数组元素的方法是使用Vue提供的$push方法。使用$push向数组末尾添加一个元素也是触发变更监听的。示例代码如下：

this.array.$push(newValue);

示例

下面是一个通过Vue提供的$set方法添加一个新元素到数组中的实际代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="addElem">添加数组元素</button>
    <ul>
      <li v-for="(item, index) in array" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue添加数组元素',
      array: ['JavaScript', 'CSS', 'HTML']
    }
  },
  methods: {
    addElem() {
      this.$set(this.array, this.array.length, 'Vue.js');
    }
  }
}
</script>

上述代码中，我们定义了一个标题和数组，并将数组渲染到页面上。我们创建了一个addElem方法，用于在数组末尾添加一个新元素，并使用$set方法触发响应式更新。简单解释一下代码：

• this.array.length 等价于数组的最后一个位置，即可在数组末尾添加新元素；
• 'Vue.js' 是我们要添加的新元素。

下面是一个通过Vue提供的$push方法向数组尾部添加新元素的实际代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="addElem">添加数组元素</button>
    <ul>
      <li v-for="(item, index) in array" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue添加数组元素',
      array: ['JavaScript', 'CSS', 'HTML']
    }
  },
  methods: {
    addElem() {
      this.array.$push('Vue.js');
    }
  }
}
</script>

上述代码执行的效果与$set方法相同，只是我们使用了Vue提供的 $push方法。

希望这篇攻略能对你理解Vue数组添加数据方式有所帮助。