vue關於資料更新的問題

2021-09-29 17:38:25 字數 964 閱讀 5860

關於vue資料更新的原理可以參考我的另外一篇部落格。

vue不能更新檢視的原因為無法監聽到引用資料型別中屬性的增加與刪除。

前提:在vue例項內建立,才具備getter/setter,才能被vue更新。

vue只會監聽資料的「第一層」的改變

array[i] = 3;

array.length = 0

object.a = 3;

// 同乙個 引用型別 中插入資料,導致資料物件本身沒有改變,也就意味著vue檢查不到資料記憶體指向做更改,這就會導致插入的只是不具備 getter/setter 的屬性。

const obj =

obj.b = 2

這些情況vue是無法監聽的。

// 替換乙個記憶體指向完成資料變化,vue能監聽

const obj =

obj.b = 0

array = [1,2]
以上和push, pop,shift,unshift, splice, sort,reverse等這些改變原陣列的方法可以被監聽

解決無法監聽的問題

1. this.$vue(array, index, data)    // 在物件中新增乙個新的屬性或者修改陣列的寫法
2.使用臨時變數

let temparray = [...this.array]

temparray[0] =

this.array = temparray

上面的方法對於物件這種引用資料型別同樣也適用,陣列、物件指向的是位址,進到位址裡面修改,vue是監聽不到的,而把它指向另外乙個位址就可以監聽。

vue3之後解決了這個問題。

關於vue的專案有關問題 隨時更新)

注意 例項通過 refs來訪問子元件,且命名規則不能為駝峰式,應為 型.1 當ref直接定義在dom元素上時,則通過this.refs.name可以獲取到dom對dom進行原生的操作 class foodmenu ref food menu 通過this.refs獲取到dom進行操作 注意ref屬性...

vue 非同步資料更新問題

記錄一下出現的問題,資料翻倍 這是復現問題的 data methods console.log 此時的this.allresult this allresult watch mounted 結果 此時你可以看到第二次的資料時 是 第一次的 2倍 mounted 和 watch 都執行 getmess...

關於ViewPager的資料更新問題小結

今天工作中遇到了這個糾結的問題,在viewpager中呼叫pageradapter.notifydatasetchanged 方法,好像沒有任何作用,相應的view也沒有更新資料,根據官方api是這樣解釋的 大概是說明adapter會自動管轄viewpager每一頁 item 的狀態,而notify...