關於Vue不能監聽（watch）數組變化

1、vue監聽數組
vue實際上能夠監聽數組變化，好比

data () {
  return {
    watchArr: [],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

在好比使用splice(0,2,3)從數組下標0刪除兩個元素，並在下標0插入一個元素3

data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

push數組也可以監聽到
2、vue沒法監聽數組變化的狀況
可是數組在下面兩種狀況下沒法監聽

1. 利用索引直接設置數組項時，例如arr[indexofitem]=newValue
2. 修改數組的長度時，例如arr.length=newLength

舉例沒法監聽數組變化的狀況
一、利用索引直接修改數組值

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr[0].name = 'xiaoyue';
  }, 1000);
},

二、修改數組的長度
長度大於原數組就將後續元素設置爲undefined
長度小於原數組就將多餘元素截掉

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.length = 5;
  }, 1000);
},