解決Vue響應(yīng)式數(shù)據(jù)已獲取而視圖不更新的問題
首先
我們要深刻理解 Vue響應(yīng)式的原理 通過get 和 set進(jìn)行獲取與設(shè)置 同時(shí)通知觀察者進(jìn)行新舊虛擬dom樹 diff算法就地更新 重新渲染組件
特別注意
Vue官方文檔的注意事項(xiàng)
由于javaScript的限制 Vue不能檢測(cè)數(shù)組和對(duì)象的變化 因此你就要思考 為什么我的響應(yīng)式有問題
我們看一個(gè)實(shí)戰(zhàn)bug 同事托我解決的一個(gè)問題
watch 偵聽tree回調(diào)函數(shù) 過濾出來的數(shù)組 從而去觸發(fā)filterNode
但是watch正常 但是偏偏不觸發(fā)filterNode 一切正常 數(shù)據(jù)全有 變化也有 refdom節(jié)點(diǎn)也能打印出來 就是不觸發(fā)~ 唯一的可能性 樹是空的 所以導(dǎo)致不觸發(fā)回調(diào)過濾
但是有時(shí)候刷新頁(yè)面能觸發(fā) 有時(shí)候不能觸發(fā) 我懷疑是 Vue的熱更新和瀏覽器的緩存導(dǎo)致
因此我們可以想象為什么 樹是空的 我明明有數(shù)據(jù) 為什么dom上的節(jié)點(diǎn)為空
只有一種可能 數(shù)據(jù)更新 視圖沒有獲取到 那就證明Vue響應(yīng)式出錯(cuò)了
所以我發(fā)現(xiàn)我同事在數(shù)據(jù)處理上有問題 他利用下標(biāo)去處理數(shù)組進(jìn)行循環(huán)賦值 因此讓Vue沒有劫持到
所以我換了種寫法 用的push 因?yàn)閜ush可以做到Vue對(duì)數(shù)據(jù)更新的檢測(cè)
對(duì)于這種問題 Vue官網(wǎng)提供的 Set方法也可以解決 不過這屬于亡羊補(bǔ)牢 根本問題并沒有解決。
對(duì)于解決bug
困難不在于如何去解決 而是難在去尋找問題 排查問題所在 排查問題的能力是一位開發(fā)者至關(guān)重要的手段。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法
作為一個(gè)前端新手,項(xiàng)目中遇到權(quán)限處理時(shí),通常會(huì)采用動(dòng)態(tài)添加路由的方法來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法的相關(guān)資料,需要的朋友可以參考下2023-11-11
前端使用el-table自帶排序功能\后端排序方法實(shí)例
在Vue.js中使用Element UI庫(kù)時(shí)可以通過el-table組件來展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關(guān)于前端使用el-table自帶排序功能\后端排序的相關(guān)資料,需要的朋友可以參考下2024-08-08
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記（1）
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法
今天小編就為大家分享一篇vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue 中固定導(dǎo)航欄的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11