解決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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3中的onMounted生命周期鉤子,它在組件掛載到DOM后執(zhí)行代碼,onMounted只調(diào)用一次,適合進(jìn)行異步操作、DOM操作和事件監(jiān)聽(tīng),在使用時(shí)需要注意組件銷毀和響應(yīng)式數(shù)據(jù)的管理,需要的朋友可以參考下2024-11-11
在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作
這篇文章主要介紹了在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
前端Vue3列表滑動(dòng)無(wú)限加載功能實(shí)現(xiàn)
這篇文章主要介紹了前端Vue3列表滑動(dòng)無(wú)限加載功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-05-05
Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
本篇文章主要介紹了Vue路由跳轉(zhuǎn)問(wèn)題記錄詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
通過(guò)vue-cropper選取本地圖片自定義裁切圖片比例
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05
vue使用jsonp抓取qq音樂(lè)數(shù)據(jù)的方法
這篇文章主要介紹了vue使用jsonp抓取qq音樂(lè)數(shù)據(jù)的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了搭建vue開(kāi)發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07