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

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

我也不說(shuō)什么計(jì)算屬性里面要依賴data里面的變量變化了才計(jì)算

因?yàn)樯厦?個(gè)我都試過(guò)了

解決辦法是

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

在vuex里面

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

pageInfo.detail[key] = value  這種寫(xiě)法里面其實(shí)vue2里面是不會(huì)被監(jiān)聽(tīng)到變化的 

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

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

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

替代方法

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

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

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

特別注意 => Vue官方文檔的注意事項(xiàng)

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

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

watch 偵聽(tīng)tree回調(diào)函數(shù) 過(guò)濾出來(lái)的數(shù)組 從而去觸發(fā)filterNode

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

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

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

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

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

所以我換了種寫(xiě)法 用的push 因?yàn)閜ush可以做到Vue對(duì)數(shù)據(jù)更新的檢測(cè)

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

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

總結(jié)

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

最新評(píng)論