Vue之修改數(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的解釋就是使用這個api修改的數(shù)據(jù)會為其添加響應(yīng)式getter和setter讓其擁有數(shù)據(jù)響應(yīng)的特性
vm.$set(要操作的對象或數(shù)組, 要新增或者修改的數(shù)組或?qū)ο髃ey, 對應(yīng)的值)
解決方法3
Vue.$forceUpdate(手動強(qiáng)制更新視圖)
因為Vue修改數(shù)據(jù)是異步執(zhí)行的，所以視圖不會立即更新，會等到下一次dom更新循環(huán)結(jié)束后統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù)，然后同步視圖更新，所以我們可以修改后自己手動強(qiáng)制更新視圖
解決方法4
Object.assign(使用修改棧能觸發(fā)視圖更新的特性，借鑒React的寫法)
我們都知道Object.assign能拷貝合成一個新對象，所以我們只需要將要修改的值合并成一個新對象然后賦值給data中的對象或數(shù)組，這樣棧的指向被修改了.觸發(fā)視圖更新
解決方法5
對于數(shù)組還可以使用splice方法(Vue對于數(shù)組的操作能識別變化的api包括splice):
this.arr.splice(你要修改的元素索引位置，1，修改后的值) 這是修改操作
- 示例：修改a
this.obj.splice(0, 1, {
a: 456
});this.arr.splice(你要添加到哪個元素的前面就寫那個元素的索引+1，0，要添加的值) 這是添加操作
- 示例：添加b
this.obj.splice(1, 0, {
b: 456
});this.arr.splice(你要刪除的元素索引，1) 這是刪除操作
- 示例：刪除a
this.obj.splice(0, 1);
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了淺談Vue?DIFF，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue2中路由傳參數(shù):props(父傳子),$emit與v-on(子傳父),EventBus(兄弟傳參),.sync與update:(父子雙向),v-model(父子雙向),ref?$children與$parent,$attrs與$listeners(爺孫雙向),provide與inject(多層傳參),Vuex,Vue.prototype,路由,瀏覽器緩存,window,$root,slot(父傳子)2024-08-08
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。這篇文章我們將一起學(xué)習(xí)vue.js的計算屬性。什么是計算屬性，為什么要用這東西呢？通過下面這篇文章你將解決這些問題，下面來一起看看吧。2016-09-09
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識，整合了第三方j(luò)query 插件select2,具體實例代碼大家參考下本文2018-04-04
vue中使用keep-alive動態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動態(tài)刪除已緩存組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vxe-table中vxe-grid中的合并單元格方式(合并行、列)
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實現(xiàn)點擊按鈕互斥效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在實際的Vue開發(fā)中,我們經(jīng)常需要在多個組件之間共享一些工具函數(shù)或類,比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實例上掛載自己定義的工具類,并在項目中高效使用這些工具,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue3中的hooks總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue單個組件實現(xiàn)無限層級多選菜單的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04