vue數(shù)組雙向綁定問題及$set用法

在vue開發(fā)中，我們有時(shí)會遇到數(shù)據(jù)更新視圖不更新問題，地址沒有改變，vue就監(jiān)測不到數(shù)據(jù)變化。這個(gè)時(shí)候，雙向綁定就失效了。

以下這幾種情況,Vue都會檢測不到數(shù)據(jù)的變化

當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength

由于 JavaScript 的限制，Vue不能檢測對象屬性的添加或刪除

數(shù)組實(shí)現(xiàn)響應(yīng)式的七個(gè)方法

• push() 可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度
• pop() 從數(shù)組的尾部刪除一個(gè)元素，返回刪除的元素  
• unshift() 向數(shù)組的前面添加元素，返回值：數(shù)組的新長度 
• shift() 從數(shù)組頭部刪除一個(gè)元素，返回刪除的元素 
• splice()

刪除：兩個(gè)參數(shù)，splice(index,num) 刪除的第一項(xiàng)的位置以及要?jiǎng)h除的項(xiàng)數(shù)

添加：三個(gè)參數(shù)，插入起始位置、刪除的項(xiàng)數(shù)（為0）、插入的項(xiàng)，向指定位置插入任意數(shù)量的項(xiàng)。arr.splice(1,0,"or","ue")

替換：先刪除再添加，三個(gè)參數(shù)：起始位置、刪除的項(xiàng)數(shù)、要添加的項(xiàng)數(shù)。添加的與刪除的數(shù)量不一定要一致。arr.splice(1,2,"or","ue")

• sort() 對數(shù)組元素進(jìn)行排序，默認(rèn)根據(jù)字符串Unicode碼進(jìn)行排序，對數(shù)字進(jìn)行排序時(shí)參數(shù)要傳遞一個(gè)比較函數(shù)。

?? ?sortNumber(a,b){
?? ? ? ? ?return a-b
?? ?}；

• reverse() 該方法用于顛倒數(shù)組中元素的順序

上面的方法把原數(shù)組更改掉，可以選用這些方法來實(shí)現(xiàn)響應(yīng)式。

flter()、concat() 和 slice()。它們不會變更原始數(shù)組，而總是返回一個(gè)新數(shù)組。使用這些方法會造成數(shù)據(jù)雙向綁定失效。

• filter() 創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
• concat() 用于連接兩個(gè)或多個(gè)數(shù)組。該方法不會改變現(xiàn)有的數(shù)組.
• slice() 可從已有的數(shù)組中返回選定的元素,選擇從給定的 start 參數(shù)開始的元素，并在給定的 end 參數(shù)處結(jié)束，但不包括。該方法并不會修改數(shù)組，而是返回一個(gè)子數(shù)組.

$set用法

當(dāng)數(shù)據(jù)沒有被雙向綁定的時(shí)候，我們可以使用$set

this.$set(原數(shù)組, 索引值, 需要賦的值) 

vue中$set解決數(shù)據(jù)雙向綁定

由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

解決：用$set方法

當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength

解決：vm.items.splice(newLength)

this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論