Vue2 x框架中特性引起的資料丟失問題

2022-09-28 01:54:08 字數 860 閱讀 9715

js框架vue2中可以將資料與檢視進行繫結,修改data物件的屬性值將引起對應檢視的改變。vue2的資料檢視繫結是通過js特性這一語法實現,其使用中存在資料丟失的這一bug。我會詳細介紹一下幾種資料丟失情況。

let data =

data

})上述的**片段可以正常獲取到陣列0項值1,修改陣列第0項值希望能對檢視進行更新:

//   資料丟失情況1

data.nums[0] = 110;

解決方法有兩個:

1、重新賦值給陣列     data.nums = [110]

2、更新data物件中基本型別屬性的值並成功更新在檢視上,因為在更新檢視時會重新獲取data中的值,即會幫助獲取nums最新的值。(不推薦,因為必須更新基本屬性的值和檢視)

資料丟失情況2

同一基本一樣,陣列新增子項且vue例項更新成功,檢視卻無法更新。

解決方法也一樣。

資料丟失情況3

除了陣列外,自然還有普通的物件會存在資料丟失情況。物件的屬性值被更新,檢視無法更新生效。解決方法也是和陣列一樣。

資料丟失情況4

let data = {}

data

vue例項中存在num屬性,但是num屬性無法在檢視中顯示出來。解決方法為,vue規定我們如果想要在檢視中使用,我們就需要在data物件中初始化它。

let data =

官方提供給我們一種更可靠的修改屬性值的方法,可以用於解決前三種資料丟失的情況。

vue例項的$set方法,第乙個引數可以是vue例項物件,也可以是其他物件;第二個引數是物件的屬性名稱,第三個引數是屬性值。

那麼修改第一種情況中的陣列第乙個子項就可以為

vue2 x中的父子元件

最近用element ui開發乙個專案的前端,用的vue2.4.2,用到了不同元件的互動。規則管理 import sysrulesmanage from views sysrulesmanage.vue components 也可以這樣寫 components ref屬性 被用來給元素或子元件註冊引...

vue2 x移動端ui框架選型

最近公司準備做移動端spa專案,需要選乙個ui框架。優先考慮谷歌material design設計風格。針對市面上的框架進行了一次調研,簡單總結如下。選型原則 1.優先考慮md風格。2.github的star數量5k以上。3.高可靠性,以及持續維護。muse ui star 7k。個人維護。移動端和...

Vue2 x學習二 資料渲染

之前,我們提到了vue可以解析雙大括號中的語法,資料繫結 以及,列表渲染 v for。在這一章中,我們將詳細說明資料的幾種繫結 渲染方式。之前一章中我們提到過,此處,我們通過 進行簡單回顧。補充 我們說過,在雙大括號中的語法變數能夠被vue解析。事實上,雙大括號中還能夠放表示式,常規表示式都能夠被解...