關於Vue不能監聽(watch)數組變化的解決方法

Posted on by

一、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數組也能夠監聽到。

二、vue無法監聽數組變化的情況

但是數組在下面兩種情況下無法監聽

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

舉例無法監聽數組變化的情況

1、利用索引直接修改數組值

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

2、修改數組的長度

  • 長度大於原數組就將後續元素設置為undefined
  • 長度小於原數組就將多餘元素截掉
data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('監聽：' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.length = 5;
  }, 1000);
},

到此這篇關於關於Vue不能監聽(watch)數組變化的文章就介紹到這瞭,更多相關Vue不能監聽數組變化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：