vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
我們在開發(fā)過程中會碰到數(shù)據(jù)更新，但是視圖并未改變的情況，情況如下：
第一種:動態(tài)給對象新增屬性或者刪除屬性是不會觸發(fā)視圖刷新的,Vue識別不到；
第二種:通過數(shù)組下標(biāo)修改數(shù)組中的元素或者手動修改數(shù)組的長度,Vue識別不到；
**解決方法1：靜默刷新(使用v-if的特性)
在修改值之后將元素銷毀,然后在修改后的下一次DOM渲染完成時再顯示出來,這樣就會觸發(fā)組件重新加載data的數(shù)據(jù)進(jìn)行渲染,data中被修改的數(shù)據(jù)才是最新的。
解決方法2:Vue.$set(官方推薦)
使用這個api修改的數(shù)據(jù)會為其添加響應(yīng)式getter和setter讓其擁有數(shù)據(jù)響應(yīng)的特性
vm.$set(要操作的對象或數(shù)組, 要新增或者修改的數(shù)組或?qū)ο髃ey, 對應(yīng)的值)
解決方法3: Vue.$forceUpdate(手動強制更新視圖)
因為Vue修改數(shù)據(jù)是異步執(zhí)行的,所以視圖不會立即更新,會等到下一次dom更新循環(huán)結(jié)束后統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù),然后同步視圖更新,所以我們可以修改后自己手動強制更新視圖。
解決方法4:Object.assign(使用修改棧能觸發(fā)視圖更新的特性)
我們都知道Object.assign能拷貝合成一個新對象,所以我們只需要將要修改的值合并成一個新對象然后賦值給data中的對象或數(shù)組,這樣棧的指向被修改了.觸發(fā)視圖更新
解決方法5:對于數(shù)組還可以使用splice方法
(Vue對于數(shù)組的操作能識別變化的api包括push()、pop()、shift()、unshift()、splice()、sort()、reverse()這些都可被vue監(jiān)測到)
總結(jié)
到此這篇關(guān)于vue開發(fā)中數(shù)據(jù)更新但視圖不刷新解決的文章就介紹到這了,更多相關(guān)vue視圖不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue + any-touch實現(xiàn)一個iscroll 實現(xiàn)拖拽和滑動動畫效果
這篇文章主要介紹了vue + any-touch實現(xiàn)一個iscroll實現(xiàn)拖拽和滑動動畫效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue ssr服務(wù)端渲染(小白解惑)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了解決安裝arco-design-pro-vue失敗的問題方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue列表渲染的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要給大家介紹了關(guān)于Vue中加載天地圖的離線地圖的基本步驟,Vue天地圖離線地圖是指基于Vue框架開發(fā)的應(yīng)用程序,使用天地圖離線地圖服務(wù)提供商提供的地圖數(shù)據(jù),可以在沒有網(wǎng)絡(luò)的情況下使用地圖功能,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了配置一個vue3.0項目的完整步驟，從0開始配置一個vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
下面小編就為大家分享一篇vue.js中$set與數(shù)組更新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-05-05
如何使用vue實現(xiàn)前端導(dǎo)入excel數(shù)據(jù)
在實際開發(fā)中導(dǎo)入功能是非常常見的,導(dǎo)入功能前端并不難,下面這篇文章主要給大家介紹了關(guān)于如何使用vue實現(xiàn)前端導(dǎo)入excel數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04