这一篇文章主要说一下Vue对数组的各种操作。在说Vue之前，我们先了解一下javascript中对数组操作的常见函数。

splice用法灵活多变，这里重点说一下。语法如下：

arrayObject.splice(index,howmany,item1,.....,itemX)

| 参数 | 描述 |
| ------ |: -------- ?
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置 |
| how many | 必需。要删除的项目数量。如果设置为 0，则不会删除项目 |
| item1,…,itemx | 可选。向数组添加的新项目 |

此处参考：http://www.w3school.com.cn/jsref/jsref_splice.asp

Vue对这些方法进行了重写，每次对使用这些方法对数组进行操作后，就会触发视图的刷新。验证代码如下：

<template>
  <div class="hello">
    <button @click="addItem">增加</button>
    <button @click="deleteItem">删除</button>
    <button @click="shiftOperation">shift操作</button>
    <button @click="unshiftOperation">unshift操作</button>
    <button @click="spliceOperation">splice操作</button>
    <button @click="sortOperaton">sort操作</button>
    <ul>
      <li v-for="user in list">
        <span>{{user.nickName}}</span>**
        <span>{{user.age}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        list: [
          {nickName: '张三', age: 50},
          {nickName: '李四', age: 20},
          {nickName: '王五', age: 5},
          {nickName: '赵六', age: 45}
        ]
      }
    },
    methods: {
      addItem () {
        // 这里对数据进行操作
        this.list.push({nickName: '老头', age: 90})
      },
      deleteItem (){
        this.list.pop()
      },
      shiftOperation (){
        this.list.shift()
      },
      unshiftOperation (){
        this.list.unshift({nickName: '路人', age: 30})
      },
      spliceOperation (){
        this.list.splice(2, 1, {nickName: '帅哥', age: 45})
      },
      sortOperaton (){
        this.list.sort(function(a, b){
       var age1 =a.age;
       var age2 = b.age;
        return age1 -age2;
        })
      }

    }
  }</script>
<style scoped>h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 0 10px;
}

a {
  color: #42b983;
}

.top {
  margin: auto;
  width: 200px;
  height: 100px;
  background: #f56868;
}</style>

本来想给大家录gif的，但是好像录不上，大家感兴趣的话，可以自己验证下哦。
  但是呢由于javaScript的限制，Vue.js不能检测到下面数组的变化。

• 直接使用索引设置元素，如vm.items[0] = {}

• 修改数据的长度，如vm.items.length = 0

针对这种情况，Vue.js中可以使用set(),和remove()这两个函数，具体操作如下：

this.list.set(1,item)

this.list.remove(item)

其中item分别为要替换和，要移除的元素。