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