vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
vue比較常見(jiàn)的坑就是數(shù)據(jù)（后臺(tái)返回）更新了，但是UI界面并沒(méi)有更新，常見(jiàn)于以下情況：
一、數(shù)據(jù)為數(shù)組時(shí)
1.通過(guò)數(shù)組索引修改數(shù)組元素例如：
此時(shí)UI數(shù)據(jù)并不會(huì)刷新
2.修改數(shù)組長(zhǎng)度時(shí)：
解決方案：
如果data為JSON數(shù)組則如下：
第一個(gè)參數(shù)為要更新數(shù)據(jù)的數(shù)組，第二個(gè)參數(shù)為要更新的數(shù)組中具體的元素下標(biāo)，第三個(gè)參數(shù)為新數(shù)據(jù)
備注:
數(shù)組原型上的方法vue可直接檢測(cè)到變化：push(),pop(),shift(),unshift(),splice(),sort()
二、數(shù)據(jù)為對(duì)象時(shí):
Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：你可以這樣添加一個(gè)屬性
如果要添加多個(gè)屬性可以
補(bǔ)充知識(shí)：vue computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性解疑答惑
computed計(jì)算屬性
計(jì)算屬性類似于方法，用于輸出data中定義的屬性數(shù)據(jù)的結(jié)果，data數(shù)據(jù)變化時(shí)，計(jì)算屬性的結(jié)果會(huì)同步變化，需要注意的是計(jì)算屬性不可與data定義的屬性同名。
相比于方法它的優(yōu)勢(shì)是只有當(dāng)依賴的屬性變化時(shí)，才會(huì)重新計(jì)算。而方法會(huì)在每次重新render的時(shí)候都會(huì)執(zhí)行，因此計(jì)算屬性相比方法性能明顯更高，而且計(jì)算屬
性可直接綁定在v-model屬性上。計(jì)算屬性還提供get和set方法進(jìn)行讀寫操作。
watch方法
一旦監(jiān)聽(tīng)了data中的屬性，只要data數(shù)據(jù)變化了會(huì)立即觸發(fā)watch方法，watch方法不僅可以監(jiān)聽(tīng)變量，還可以監(jiān)聽(tīng)對(duì)象里的某個(gè)屬性，甚至是數(shù)組里的某個(gè)元素
html:
javascript:
以上這篇vue數(shù)據(jù)更新UI不刷新顯示的解決辦法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
甘特圖是一種條狀圖,直觀展示項(xiàng)目進(jìn)展隨時(shí)間的走勢(shì)及聯(lián)系,其中,項(xiàng)目時(shí)間由橫軸表示,項(xiàng)目活動(dòng)由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實(shí)現(xiàn)方法,并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開(kāi)源在線文件預(yù)覽項(xiàng)目，這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制一些特殊樣式的折線圖和柱狀圖,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2024-02-02
淺析Vue中權(quán)限管理的實(shí)現(xiàn)
在前端開(kāi)發(fā)中,權(quán)限管理是一項(xiàng)至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項(xiàng)目中實(shí)施權(quán)限管理,并詳細(xì)講解如何實(shí)現(xiàn)到按鈕級(jí)別的細(xì)粒度控制,希望對(duì)大家有所幫助2024-11-11
vue使用el-table篩選tree樹(shù)形結(jié)構(gòu)的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vue使用el-table篩選tree樹(shù)形結(jié)構(gòu)的數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
進(jìn)入Hooks時(shí)代寫出高質(zhì)量react及vue組件詳解
這篇文章主要介紹了Hooks時(shí)代中如何寫出高質(zhì)量的react和vue組件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了在vue中使用setInterval的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04