這一篇文章主要說一下Vue對陣列的各種操作。在說Vue之前，我們先了解一下javascript中對陣列操作的常見函式。

splice用法靈活多變，這裡重點說一下。語法如下：

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

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分別為要替換和，要移除的元素。