SOURCE

var Main = {
  data() {
    return {
      arr: [1,2,3,4,11]
    }
  },
  methods: {
    //Vue不能检测以下变动的数组
		change1(){//vm.items[indexOfItem] = newValue
      this.arr[0]=7
      console.log(this.arr)
    },
    change2(){//vm.items.length = newLength
      this.arr.length=3
      console.log(this.arr)
    },
    //Vue能检测以下变动的数组
    change3(){//Vue.set
      this.$set(this.arr,0,7)
      console.log(this.arr)
    },
    change4(){//Array.prototype.splice
      this.arr.splice(0,1,7)
      console.log(this.arr)
    },
    change5(){//Array.prototy派生
      this.arr.push(5)//最后一位加上
      console.log(this.arr)
      this.arr.pop()//最后一位去掉
      console.log(this.arr)
      this.arr.unshift(0)//第一位加上
      console.log(this.arr)
      this.arr.shift(0)//第一位去掉
      console.log(this.arr)
      this.arr.sort()//排序
      console.log(this.arr)
      this.arr.reverse()//倒叙
      console.log(this.arr)
    }
  }
}

var Component = Vue.extend(Main); 
new Component().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js">
</script>
<div id="app">
 <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  <p @click="change1">改变1(无效)</p>
  <p @click="change2">改变2(无效)</p>
  <p @click="change3">改变3(有效)</p>
  <p @click="change4">改变4(有效)</p>
  <p @click="change5">改变5(有效)</p>
</div>

#app {
  padding: 32px;
}