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