快捷導(dǎo)航

vue2?element-ui?el-checkbox視圖不更新問(wèn)題及解決

更新時(shí)間：2024年12月26日 11:08:04 作者：木有名字就是最好的名字

作者在開(kāi)發(fā)過(guò)程中遇到了視圖不更新的問(wèn)題,最終通過(guò)改變一個(gè)無(wú)關(guān)緊要的響應(yīng)式數(shù)據(jù)來(lái)解決,讓視圖發(fā)生改變

vue2 element-ui el-checkbox視圖不更新

今天在開(kāi)發(fā)過(guò)程發(fā)現(xiàn)一個(gè)問(wèn)題，如標(biāo)題所描述的，我在更改了data(){return{}}里的數(shù)據(jù)后，也就是對(duì) el-checkbox 的 v-model 綁定了一個(gè) data() 里面的數(shù)據(jù)，與之對(duì)應(yīng)的視圖沒(méi)有發(fā)生變化

我之所以斷定我data() 里的數(shù)據(jù)發(fā)生了變化，而視圖沒(méi)有發(fā)生變化，是因?yàn)?在chrome 的插件 vue devtools 中確認(rèn)了 data() 數(shù)據(jù)是發(fā)生了改變，也就證明el-checkbox 的v-model綁定的boolean 值發(fā)生了改變，此時(shí)視圖應(yīng)該按照 v-model="false" ==> v-model="true" 從未勾選狀態(tài)==>勾選狀態(tài) 但是頁(yè)面一直沒(méi)有更新。

在確認(rèn)自己不是因?yàn)榈图?jí)錯(cuò)誤而導(dǎo)致的視圖不更新后，對(duì)該問(wèn)題進(jìn)行了不同的處理

1：百度：使用 $set() 、使用froceUpdate() 這兩者都不起作用

既然已經(jīng)明確了數(shù)據(jù)是發(fā)生了變化，依賴數(shù)據(jù)的視圖沒(méi)有發(fā)生改變，那么可以通過(guò) 較為偏激的方法用v-if="true" / v-if="false" 的方法將組件銷毀再重新掛載，（此種方法過(guò)于偏激，而且相對(duì)另類不推薦使用）

既然有通過(guò) v-if 的方法強(qiáng)行讓元素重新渲染，那么是否可以利用 vue 的一些特性進(jìn)行類似的操作呢？

我個(gè)人觀點(diǎn)

vue 響應(yīng)式可以通過(guò) 數(shù)據(jù)驅(qū)動(dòng)頁(yè)面的更新加上 diff算法，可以試著給 el-checkbox 組件一個(gè) 無(wú)關(guān)緊要的屬性

例如：

data-xxx=“響應(yīng)式數(shù)據(jù)” 通過(guò)更改該響應(yīng)式數(shù)據(jù) 讓vue 在進(jìn)行diff算法中，發(fā)現(xiàn)虛擬Dom el-checkbox 的其中一個(gè) data-xxx 屬性發(fā)生變化，從而讓其觸發(fā)該組件的渲染，以達(dá)到 v-model 綁定的值改變所對(duì)應(yīng)的視圖發(fā)生變化。

例子：

<el-checkbox v-model="list[index].obj[value].checked" :data-a="checked">

偽代碼：

function changeValue(){
// 將 list[index].obj[value].checked 為 false 改為 true

this.list[index].obj[value].checked = true // 此時(shí)視圖 并沒(méi)有因?yàn)?數(shù)據(jù)的變化 而 從 未勾選變成勾選狀態(tài)

// 更改一個(gè) 無(wú)關(guān)緊要的 數(shù)值
this.checked = !this.checked // 此處 無(wú)論checked 是什么 都不影響 目的是讓vue 去重新渲染 el-checkbox 這個(gè)組件

}

總結(jié)

其實(shí)在一般的vue 開(kāi)發(fā)中，如果響應(yīng)式數(shù)據(jù) 不是那種非常復(fù)雜的數(shù)據(jù)類型一般不會(huì)出現(xiàn)響應(yīng)式數(shù)據(jù)變化而視圖不更行的情況，

但上述例子中 list是一個(gè)數(shù)組，數(shù)組里面有多個(gè)屬性，其中一個(gè)屬性為一個(gè)對(duì)象，而我們需要改變的值就是這個(gè)對(duì)象的其中一個(gè)屬性，可能在vue 的雙向綁定中，

由于 list 是一個(gè)相對(duì)復(fù)雜的數(shù)據(jù)類型，當(dāng)深層次里的屬性發(fā)生了改變， vue沒(méi)法做到數(shù)據(jù)驅(qū)動(dòng) 視圖更新，

當(dāng)我們非常確認(rèn)數(shù)據(jù)已經(jīng)更新了，僅僅是視圖沒(méi)有發(fā)生變化，此時(shí) 要做的就是能讓視圖發(fā)生改變的操作通過(guò)改變一個(gè)無(wú)關(guān)緊要的響應(yīng)式數(shù)據(jù) 從而讓組件進(jìn)行重新渲染操作無(wú)疑是一個(gè) 不錯(cuò)的解決方案

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: