vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
vue比較常見的坑就是數(shù)據(jù)（后臺(tái)返回）更新了，但是UI界面并沒有更新，常見于以下情況：
一、數(shù)據(jù)為數(shù)組時(shí)
1.通過數(shù)組索引修改數(shù)組元素例如：
此時(shí)UI數(shù)據(jù)并不會(huì)刷新
2.修改數(shù)組長度時(shí)：
解決方案：
如果data為JSON數(shù)組則如下：
第一個(gè)參數(shù)為要更新數(shù)據(jù)的數(shù)組，第二個(gè)參數(shù)為要更新的數(shù)組中具體的元素下標(biāo)，第三個(gè)參數(shù)為新數(shù)據(jù)
備注:
數(shù)組原型上的方法vue可直接檢測到變化：push(),pop(),shift(),unshift(),splice(),sort()
二、數(shù)據(jù)為對象時(shí):
Vue 不能檢測對象屬性的添加或刪除：你可以這樣添加一個(gè)屬性
如果要添加多個(gè)屬性可以
補(bǔ)充知識(shí)：vue computed計(jì)算屬性和watch監(jiān)聽屬性解疑答惑
computed計(jì)算屬性
計(jì)算屬性類似于方法，用于輸出data中定義的屬性數(shù)據(jù)的結(jié)果，data數(shù)據(jù)變化時(shí)，計(jì)算屬性的結(jié)果會(huì)同步變化，需要注意的是計(jì)算屬性不可與data定義的屬性同名。
相比于方法它的優(yōu)勢是只有當(dāng)依賴的屬性變化時(shí)，才會(huì)重新計(jì)算。而方法會(huì)在每次重新render的時(shí)候都會(huì)執(zhí)行，因此計(jì)算屬性相比方法性能明顯更高，而且計(jì)算屬
性可直接綁定在v-model屬性上。計(jì)算屬性還提供get和set方法進(jìn)行讀寫操作。
watch方法
一旦監(jiān)聽了data中的屬性，只要data數(shù)據(jù)變化了會(huì)立即觸發(fā)watch方法，watch方法不僅可以監(jiān)聽變量，還可以監(jiān)聽對象里的某個(gè)屬性，甚至是數(shù)組里的某個(gè)元素
html:
javascript:
以上這篇vue數(shù)據(jù)更新UI不刷新顯示的解決辦法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue項(xiàng)目中常常會(huì)用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個(gè)頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue 路由懶加載，當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁面加載，這便是vue 路由懶加載，接下來隨小編一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧2021-10-10
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-pdf打包后無法預(yù)覽問題及修復(fù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了淺談vue的第一個(gè)commit分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
我們的vue2.0項(xiàng)目當(dāng)中,存儲(chǔ)了許多圖片和視頻資源,所以我們需要增加防盜鏈設(shè)置,但是這樣一來,當(dāng)我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當(dāng)中的時(shí)候,會(huì)報(bào)錯(cuò),所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下2023-12-12
如何啟動(dòng)一個(gè)Vue.js項(xiàng)目
這篇文章主要介紹了如何啟動(dòng)一個(gè)Vue.js項(xiàng)目，對Vue.js感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了vue生命周期的探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04