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