国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于Vue不能監聽(watch)數組變化

enda / 3561人閱讀

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

一、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);
},

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109598.html

相關文章

  • Vue的computed和watch的細節全面分析

    摘要:定義是一個計算屬性類似于過濾器對綁定到的數據進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應的作為計算屬性定義并返回對應的結果給這個變量變量不可被重復定義和賦值和用法回調函數當需要讀取當前屬性值是執行,根據相關數據計算并返回當前 1.computed 1.1 定義 是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理 1.2 get用法 data: { ...

    lastSeries 評論0 收藏0
  • Vue的computed和watch的細節全面分析

    摘要:定義是一個計算屬性類似于過濾器對綁定到的數據進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應的作為計算屬性定義并返回對應的結果給這個變量變量不可被重復定義和賦值和用法回調函數當需要讀取當前屬性值是執行,根據相關數據計算并返回當前 1.computed 1.1 定義 是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理 1.2 get用法 data: { ...

    CoderDock 評論0 收藏0
  • 響應式數據與數據依賴基本原理

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

    or0fun 評論0 收藏0
  • Vue實現一個全選指令

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

    zollero 評論0 收藏0
  • Vue 實現的音樂項目 music app 知識點總結分享

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

    meteor199 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<