解決Vue響應式數(shù)據已獲取而視圖不更新的問題
首先
我們要深刻理解 Vue響應式的原理 通過get 和 set進行獲取與設置 同時通知觀察者進行新舊虛擬dom樹 diff算法就地更新 重新渲染組件
特別注意
Vue官方文檔的注意事項
由于javaScript的限制 Vue不能檢測數(shù)組和對象的變化 因此你就要思考 為什么我的響應式有問題
我們看一個實戰(zhàn)bug 同事托我解決的一個問題
watch 偵聽tree回調函數(shù) 過濾出來的數(shù)組 從而去觸發(fā)filterNode
但是watch正常 但是偏偏不觸發(fā)filterNode 一切正常 數(shù)據全有 變化也有 refdom節(jié)點也能打印出來 就是不觸發(fā)~ 唯一的可能性 樹是空的 所以導致不觸發(fā)回調過濾
但是有時候刷新頁面能觸發(fā) 有時候不能觸發(fā) 我懷疑是 Vue的熱更新和瀏覽器的緩存導致
因此我們可以想象為什么 樹是空的 我明明有數(shù)據 為什么dom上的節(jié)點為空
只有一種可能 數(shù)據更新 視圖沒有獲取到 那就證明Vue響應式出錯了
所以我發(fā)現(xiàn)我同事在數(shù)據處理上有問題 他利用下標去處理數(shù)組進行循環(huán)賦值 因此讓Vue沒有劫持到
所以我換了種寫法 用的push 因為push可以做到Vue對數(shù)據更新的檢測
對于這種問題 Vue官網提供的 Set方法也可以解決 不過這屬于亡羊補牢 根本問題并沒有解決。
對于解決bug
困難不在于如何去解決 而是難在去尋找問題 排查問題所在 排查問題的能力是一位開發(fā)者至關重要的手段。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3+vite中報錯信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3中的onMounted生命周期鉤子,它在組件掛載到DOM后執(zhí)行代碼,onMounted只調用一次,適合進行異步操作、DOM操作和事件監(jiān)聽,在使用時需要注意組件銷毀和響應式數(shù)據的管理,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了在vue中使用jsonp進行跨域請求接口操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了前端Vue3列表滑動無限加載功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
這篇文章主要介紹了Vue實現(xiàn)點擊箭頭上下移動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
本篇文章主要介紹了Vue路由跳轉問題記錄詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫入門學習教程,包括其架構思想與核心的數(shù)據綁定方式等,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了vue使用jsonp抓取qq音樂數(shù)據的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了搭建vue開發(fā)環(huán)境的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07