關(guān)于Vue不能監(jiān)聽（watch）數(shù)組變化

enda 發(fā)布于2019-08-26 13:49 / 3638人閱讀

摘要：一監(jiān)聽數(shù)組實際上可以監(jiān)聽數(shù)組變化，比如監(jiān)聽在比如使用從數(shù)組下標(biāo)刪除兩個元素，并在下標(biāo)插入一個元素監(jiān)聽數(shù)組也能夠監(jiān)聽到二無法監(jiān)聽數(shù)組變化的情況但是數(shù)組在下面兩種情況下無法監(jiān)聽利用索引直接設(shè)置數(shù)組項時，例如修改數(shù)組的長度時，例如舉例無法監(jiān)聽數(shù)組

一、vue監(jiān)聽數(shù)組
vue實際上可以監(jiān)聽數(shù)組變化，比如

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

在比如使用splice(0,2,3)從數(shù)組下標(biāo)0刪除兩個元素，并在下標(biāo)0插入一個元素3

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

push數(shù)組也能夠監(jiān)聽到
二、vue無法監(jiān)聽數(shù)組變化的情況
但是數(shù)組在下面兩種情況下無法監(jiān)聽

利用索引直接設(shè)置數(shù)組項時，例如arr[indexofitem]=newValue

修改數(shù)組的長度時，例如arr.length=newLength

舉例無法監(jiān)聽數(shù)組變化的情況
1、利用索引直接修改數(shù)組值

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

2、修改數(shù)組的長度
長度大于原數(shù)組就將后續(xù)元素設(shè)置為undefined
長度小于原數(shù)組就將多余元素截掉

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

GPU云服務(wù)器云服務(wù)器監(jiān)聽參數(shù)變化 js 監(jiān)聽數(shù)據(jù)變化 js 監(jiān)聽數(shù)組改變關(guān)于c語言數(shù)組的代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109598.html

相關(guān)文章

Vue的computed和watch的細節(jié)全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應(yīng)的作為計算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當(dāng)前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 評論0 收藏0
Vue的computed和watch的細節(jié)全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應(yīng)的作為計算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當(dāng)前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 評論0 收藏0
響應(yīng)式數(shù)據(jù)與數(shù)據(jù)依賴基本原理

摘要：響應(yīng)式數(shù)據(jù)響應(yīng)式數(shù)據(jù)不是憑空出現(xiàn)的。對于對象而言，如果是之前不存在的屬性，首先可以將進行響應(yīng)化處理比如調(diào)用，然后將對具體屬性定義監(jiān)聽比如調(diào)用函數(shù)，最后再去做賦值，可能具體的處理過程千差萬別，但是內(nèi)部實現(xiàn)的原理應(yīng)該就是如此僅僅是猜測。前言　　首先歡迎大家關(guān)注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵。　　國內(nèi)前端算...

or0fun 2019-08-26 11:54 評論0 收藏0
用Vue實現(xiàn)一個全選指令

摘要：最近用做了兩個項目，都需要實現(xiàn)全選反選的功能，兩個項目用了兩種實現(xiàn)方法，第一個項目用的，第二個項目用指令來實現(xiàn)，用起來，發(fā)覺指令更加方便。至此，一個全選的指令就完成了。最近用vue做了兩個項目，都需要實現(xiàn)全選反選的功能，兩個項目用了兩種實現(xiàn)方法，第一個項目用vue的computed，第二個項目用指令來實現(xiàn)，用起來，發(fā)覺指令更加方便。第一次做全選的時候是剛開始接觸vue不久，全選的實...

zollero 2019-08-20 10:45 評論0 收藏0
Vue 實現(xiàn)的音樂項目 music app 知識點總結(jié)分享

摘要：后兩個屬性可選。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。它的默認值為，即項目的本來大小。結(jié)合的異步組件和的代碼分割功能，輕松實現(xiàn)路由組件的懶加載。項目總結(jié) 這是我第二個用 Vue 實現(xiàn)的項目，下面內(nèi)容包括了在實現(xiàn)過程中所記錄的知識點以及一些小技巧項目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 評論0 收藏0