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

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

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

一、vue監(jiān)聽數(shù)組
vue實(shí)際上可以監(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ù)組項(xiàng)時，例如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);
},

云服務(wù)器 GPU云服務(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://systransis.cn/yun/109598.html

相關(guān)文章

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

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

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

摘要：定義是一個計(jì)算屬性類似于過濾器對綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會報如下圖片的錯誤因?yàn)閷?yīng)的作為計(jì)算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前 1.computed 1.1 定義是一個計(jì)算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進(jìn)行處理 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)的。對于對象而言，如果是之前不存在的屬性，首先可以將進(jìn)行響應(yīng)化處理比如調(diào)用，然后將對具體屬性定義監(jiān)聽比如調(diào)用函數(shù)，最后再去做賦值，可能具體的處理過程千差萬別，但是內(nèi)部實(shí)現(xiàn)的原理應(yīng)該就是如此僅僅是猜測。前言　　首先歡迎大家關(guān)注我的Github博客，也算是對我的一點(diǎn)鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵。　　國內(nèi)前端算...

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

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

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

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

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