vue 獲取到資料但卻渲染不到頁面上

2021-10-09 03:36:57 字數 1383 閱讀 7304

問題描述:資料改變了,資料列印出來都正確,但是頁面裡面就是不顯示、沒變化。

很多時候對資料進行處理了,但是頁面上就是沒變化,沒效果,用 console.log 列印資料都沒問題,特別是陣列、物件容易出現這個問題;

1、 this.$set( *** )

vue.

set( target, propertyname/index, value )

//this.$set(item, 'pics', pics)

儲存變數,(向響應式物件中新增乙個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。它必須用於向響應式物件上新增新屬性,因為 vue 無法探測普通的新增屬性)

2、 this.$delete( *** )

vue.

delete

( target, propertyname/index )

刪除物件的屬性,(如果物件是響應式的,確保刪除能觸發更新檢視。這個方法主要用於避開 vue 不能檢測到屬性被刪除的限制,但是你應該很少會使用它)

3、this.$forceupdate( *** )

強制更新,迫使 vue 例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件,而不是所有子元件。

這個就需要了解 vue 是如何實現資料的響應式,

vue響應式實現分為兩塊:物件和陣列

vue 讓 物件 資料變得「可觀測」 是通過重寫 object.defineproperty()方法中的 get 和 set 方法; 在getter中收集依賴,在setter中通知依賴更新,至於怎麼建立的、怎麼去通知 dom 更新有興趣的同學可以去看看原始碼;

不足:雖然 vue 遞迴了物件屬性並新增了依賴,但是當我們向object資料裡新增一對新的key/value或刪除一對已有的key/value時,它是無法觀測到的,導致當我們對object資料新增或刪除值時,無法通知依賴,無法驅動檢視進行響應式更新;為了解決這一問題,vue增加了兩個全域性api:vue.set和vue.delete;

vue 讓 陣列 資料變得「可觀測」 與物件類似,vue 中建立了乙個陣列操作方法的***push,pop,shift,unshift,splice,sort,reverse重寫了這些運算元組的方法,當呼叫這些方法時也是在getter中收集依賴,在setter中通知依賴更新;

不足:通過陣列下標修改陣列中的資料、通過修改陣列長度清空陣列,這種操作方式來修改陣列是無法偵測到的,但是同樣可以使用vue.set和vue.delete 來解決這個問題;

vue渲染大量資料優化 Vue列表頁渲染優化詳解

vue列表頁渲染優化,具體內容如下 想法初始化時,vue會對data做getter setter改造,在現代瀏覽器裡,雖然js已經足夠快,但仍然有優化空間。列表頁的資料結構為 vue會給陣列中的每個值設定getter和setter來監聽它們的變動 但其實列表資料是不會發生變化的,這些操作是多餘的。方...

axios獲取資料,vue不重新渲染

解決如下 使用者名稱th 郵箱th th tr thead v for user,i in list key user.userid td v text user.username td td td tr tbody table div 建立 vue 例項,得到 viewmodel var vm n...

vue非同步axios獲取的資料怎樣渲染到頁面

我們在vue,資料很多事非同步獲取來的,如果在template直接使用,會報錯,undefined。因為先渲染後得到的資料,那如何才能不報錯呢?computed 舉個例子 index.vue 忽略坑人的傳參方式。created 在建立時獲取資料,將其存入store 加入頁面只能這樣寫 equip.v...