Vue之修改數(shù)據(jù)頁面不更新的問題
第一種場景
動態(tài)給對象新增屬性或者刪除屬性是不會觸發(fā)視圖刷新的，Vue識別不到：
第二種場景
通過數(shù)組下標修改數(shù)組中的元素或者手動修改數(shù)組的長度，Vue識別不到：
解決方法1
靜默刷新(使用v-if的特性)
在修改值之后將元素銷毀，然后在修改后的下一次DOM渲染完成時再顯示出來，這樣就會觸發(fā)組件重新加載data的數(shù)據(jù)進行渲染，data中被修改的數(shù)據(jù)才是最新的
解決方法2
Vue.$set(官方推薦)
官方對這個API的解釋就是使用這個api修改的數(shù)據(jù)會為其添加響應式getter和setter讓其擁有數(shù)據(jù)響應的特性
vm.$set(要操作的對象或數(shù)組, 要新增或者修改的數(shù)組或?qū)ο髃ey, 對應的值)
解決方法3
Vue.$forceUpdate(手動強制更新視圖)
因為Vue修改數(shù)據(jù)是異步執(zhí)行的，所以視圖不會立即更新，會等到下一次dom更新循環(huán)結(jié)束后統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù)，然后同步視圖更新，所以我們可以修改后自己手動強制更新視圖
解決方法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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue項目如何實現(xiàn)切換主題色思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下2023-11-11
vue3中el-table實現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關于vue3中el-table實現(xiàn)多表頭并表格合并行或列的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
使用vue3實現(xiàn)element-plus的主題切換效果
Vue3 Element Plus是一個基于Vue 3框架的UI組件庫,它是由Element UI團隊開發(fā)的升級版本,Element Plus延續(xù)了Element UI簡潔、高效的風格,并引入了一些新的設計語言和技術,如響應式API和更好的性能優(yōu)化,本文給大家介紹了如何使用vue3實現(xiàn)element-plus的主題切換效果2024-12-12
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
Laravel 如何在blade文件中使用Vue組件的示例代碼
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue中data和props的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習吧2024-01-01
今天我們將利用vue的條件指令來完成一個簡易的動態(tài)變色功能按鈕,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-05