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

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

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

在確認自己不是因為低級錯誤而導致的 視圖不更新后， 對該問題進行了 不同的處理

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

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

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

我個人觀點

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

例如 ：

data-xxx=“響應(yīng)式數(shù)據(jù)” 通過更改 該響應(yīng)式數(shù)據(jù) 讓vue 在進行diff算法中，發(fā)現(xiàn)虛擬Dom el-checkbox 的其中一個 data-xxx 屬性發(fā)生變化，從而 讓其觸發(fā)該組件的 渲染，以達到 v-model 綁定的值改變 所對應(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ù)據(jù)的變化 而 從 未勾選變成勾選狀態(tài)

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

}

總結(jié)

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

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

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

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

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

最新評論