vue改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到

首先我這里就不說什么強(qiáng)制刷新api了，那東西沒用。

我也不說什么計算屬性里面要依賴data里面的變量變化了才計算

因為上面2個我都試過了

解決辦法是

使用 Object.assign({}, pageInfo.detail, obj)賦值即可正常解決

在vuex里面

? ? updateContent({
? ? ? ? commit,
? ? ? ? state
? ? }, {
? ? ? ? key,
? ? ? ? value
? ? }) {
? ? ? ? let pageInfo = state.pageInfo;
? ? ? ?
? ? ? ? ? ? //pageInfo.detail[key] = value ?一開始我這里直接賦值的不行
? ? ? ? ? ? let obj = {}
? ? ? ? ? ? obj[key] = value
? ? ? ? ? ? pageInfo.detail = Object.assign({}, pageInfo.detail, obj)
? ? }

pageInfo.detail[key] = value  這種寫法里面其實vue2里面是不會被監(jiān)聽到變化的 

1. 不能監(jiān)聽的情況

（1） 直接通過下標(biāo)賦值  arr[i] = value

（2） 直接修改數(shù)組長度 arr.length = newLen 

替代方法

Vue.set(arr, index, newvalue)
arr.splice(newLen)

vue響應(yīng)式數(shù)據(jù)已獲取視圖不更新問題

首先 => 我們要深刻理解 Vue響應(yīng)式的原理 通過get 和 set進(jìn)行獲取與設(shè)置 同時通知觀察者進(jìn)行新舊虛擬dom樹 diff算法就地更新 重新渲染組件

特別注意 => Vue官方文檔的注意事項

由于javaScript的限制 Vue不能檢測數(shù)組和對象的變化 因此你就要思考 為什么我的響應(yīng)式有問題

我們看一個實戰(zhàn)bug 同事托我解決的一個問題

watch 偵聽tree回調(diào)函數(shù) 過濾出來的數(shù)組 從而去觸發(fā)filterNode

但是watch正常 但是偏偏不觸發(fā)filterNode 一切正常 數(shù)據(jù)全有 變化也有 refdom節(jié)點也能打印出來 就是不觸發(fā)~ 唯一的可能性 樹是空的 所以導(dǎo)致不觸發(fā)回調(diào)過濾

但是有時候刷新頁面能觸發(fā) 有時候不能觸發(fā)  我懷疑是 Vue的熱更新和瀏覽器的緩存導(dǎo)致

因此我們可以想象為什么 樹是空的 我明明有數(shù)據(jù) 為什么dom上的節(jié)點為空

只有一種可能 數(shù)據(jù)更新 視圖沒有獲取到 那就證明Vue響應(yīng)式出錯了

所以我發(fā)現(xiàn)我同事在數(shù)據(jù)處理上有問題 他利用下標(biāo)去處理數(shù)組進(jìn)行循環(huán)賦值 因此讓Vue沒有劫持到

所以我換了種寫法 用的push 因為push可以做到Vue對數(shù)據(jù)更新的檢測

對于這種問題 Vue官網(wǎng)提供的 Set方法也可以解決 不過這屬于亡羊補(bǔ)牢 根本問題并沒有解決。

對于解決bug => 困難不在于如何去解決 而是難在去尋找問題 排查問題所在 排查問題的能力是一位開發(fā)者至關(guān)重要的手段。

總結(jié)

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

最新評論