vue踩坑记录之数组定义和赋值问题

首先，我需要说明一下本文讨论的vue版本是Vue 2。

一、问题描述：
在vue中，我们经常要定义和操作数组。但是，在定义和赋值数组时，可能会遇到某些坑点。主要包括以下两点：

1、不能直接使用数组的方式为data中的数组元素赋值。
2、在组件内部定义的数组会被所有组件共享。

下面，我们针对这两个坑点进行分别说明。

二、问题解决：

1、不能直接使用数组的方式为data中的数组元素赋值

在vue的data中，定义数组之后，我们一般可以通过下标的方式为数组元素赋值。比如，下面的代码：

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

//赋值
this.myArray[0] = 4;

但是，事实上，修改数组的值并不会引起vue的响应。这是因为vue并不能检测到这些使用下标方式赋值的变化。

为了解决这个问题，我们需要使用vue提供的api方法 $set 或 Vue.set 。示例如下：

this.$set(this.myArray,0,4);

或

Vue.set(this.myArray,0,4);

也可以使用splice方法来修改数组的值，这样vue就能够检测到变化了。示例如下：

this.myArray.splice(0,1,4);

2、在组件内部定义的数组会被所有组件共享

在vue的组件中，如果我们在data中定义了一个数组，并在组件内部使用了该数组，那么该数组实际上会被所有的该组件实例共享。这是因为组件实例都是基于同一个组件对象的实例化方式。

为了解决这个问题，我们需要使用vue提供的方式，为每个组件实例分别定义和赋值数组。比如，下面示例中演示了如何为每个组件实例定义和赋值独立的数组。

<template>
  <div>
    <button @click="addItem">添加</button>
    <div v-for="item in items"> {{item}} </div>
  </div>
</template>

<script>
export default {
 data(){
   return{
       items: []
   }
 },
 methods: {
   addItem(){
     this.items.push('NewItem');
     console.log(this.items);
   }
 },
 created(){
     this.items = [];
 }
}
</script>

在上面的示例中，我们为每个组件实例分别定义了一个items数组，并在created方法中为数组赋初值。

三、小结

在vue的开发中，由于各种特殊的情况，我们可能会遇到各种各样的问题。本文例举了在vue数组定义和赋值方面可能遇到的两个问题，并给出了详细的解决方案，希望对广大vue开发者有所帮助。