vue-資料問題

Rain_發表於2019-03-15
 __ob__: Observer

第一種情況

在vue的框架中對後臺返回資料進行操作的時候,控制檯列印陣列會出現一下情況,

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer] 複製程式碼

第二種情況

如果直接列印後臺返回資料就是這個情況

[{…}, {…}, {…}, {…}, {…}, {…}, {…}] 複製程式碼

在將原始資料push進vue頁面定義的陣列中就是出現第一種情況

網上查資料說這是vue的框架用於檢測資料而新增的,因為使用框架本身就是為了頁面使用資料方便,頁面的js簡單化。

Vue中的__ob__是儲存Observer物件的,用來記錄是否已經做過資料的“響應式化”,也就是是否已經被Observer處理過,最終是為了用Object.defineProperty進行資料的雙向繫結。

解決這個問題的方法就是 

前端定義變數 = JSON.parse(JSON.stringify(後臺資料陣列))
複製程式碼

對於資料的操作,如果本身從後臺返回的資料是沒有一些屬性的,前端需要自己新增屬性 ,那麼需要使用this.$set()方法對資料進行操作,然後在後續的操作中也要使用此方法運算元據,這樣做是為了解決頁面資料沒有因為資料修改而實時更新的問題。

此問題花費我一個下午解決,剛開始運算元據頁面沒有更新,然後就頻繁的修該資料定義,最後排查問題出在運算元據的方法上,以後需要多多注意。



相關文章