vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
我們在開發(fā)過程中會(huì)碰到數(shù)據(jù)更新，但是視圖并未改變的情況，情況如下：
第一種:動(dòng)態(tài)給對(duì)象新增屬性或者刪除屬性是不會(huì)觸發(fā)視圖刷新的,Vue識(shí)別不到；
第二種:通過數(shù)組下標(biāo)修改數(shù)組中的元素或者手動(dòng)修改數(shù)組的長度,Vue識(shí)別不到；
**解決方法1：靜默刷新(使用v-if的特性)
在修改值之后將元素銷毀,然后在修改后的下一次DOM渲染完成時(shí)再顯示出來,這樣就會(huì)觸發(fā)組件重新加載data的數(shù)據(jù)進(jìn)行渲染,data中被修改的數(shù)據(jù)才是最新的。
解決方法2:Vue.$set(官方推薦)
使用這個(gè)api修改的數(shù)據(jù)會(huì)為其添加響應(yīng)式getter和setter讓其擁有數(shù)據(jù)響應(yīng)的特性
vm.$set(要操作的對(duì)象或數(shù)組, 要新增或者修改的數(shù)組或?qū)ο髃ey, 對(duì)應(yīng)的值)
解決方法3: Vue.$forceUpdate(手動(dòng)強(qiáng)制更新視圖)
因?yàn)閂ue修改數(shù)據(jù)是異步執(zhí)行的,所以視圖不會(huì)立即更新,會(huì)等到下一次dom更新循環(huán)結(jié)束后統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù),然后同步視圖更新,所以我們可以修改后自己手動(dòng)強(qiáng)制更新視圖。
解決方法4:Object.assign(使用修改棧能觸發(fā)視圖更新的特性)
我們都知道Object.assign能拷貝合成一個(gè)新對(duì)象,所以我們只需要將要修改的值合并成一個(gè)新對(duì)象然后賦值給data中的對(duì)象或數(shù)組,這樣棧的指向被修改了.觸發(fā)視圖更新
解決方法5:對(duì)于數(shù)組還可以使用splice方法
(Vue對(duì)于數(shù)組的操作能識(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)文章
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個(gè)通用的頁面結(jié)構(gòu),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
本文介紹了Vue3中的動(dòng)態(tài)組件,通過`<component :is="動(dòng)態(tài)組件名或組件對(duì)象"></component>`來實(shí)現(xiàn)根據(jù)條件動(dòng)態(tài)渲染不同的組件,此外,還提到了使用`markRaw`和`shallowRef`來優(yōu)化性能,避免不必要的響應(yīng)式劫持2025-02-02
vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果
這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。本文給大家分享實(shí)現(xiàn)思路，需要的朋友可以參考下2018-01-01
Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本)
這篇文章主要介紹了openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本),主要講overlay三種最常用的案例,感興趣的朋友一起看看吧2021-09-09
如果data是一個(gè)函數(shù)的話,這樣每復(fù)用一次組件,就會(huì)返回一份新的data,下面這篇文章主要給大家介紹了關(guān)于簡單理解Vue的data為啥只能是函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09