tft每日頭條

 > 科技

 > vue前端如何遍曆後端數據

vue前端如何遍曆後端數據

科技 更新时间:2025-01-11 08:51:07

想要實現一個StepsBar,類似進度條,可以把分步操作的表單按照步驟顯示已完成、進行中、未處理的一個效果,大緻原型如下圖所示:

vue前端如何遍曆後端數據(V-FOR數據不刷新填坑記)1

設計思路

這個比較簡單,隻需通過一個步驟對象進行初始化,并動态設置其步驟狀态就好,在VUE中設計組件如下:

vue前端如何遍曆後端數據(V-FOR數據不刷新填坑記)2

StepsBar中,通過一個Map對象管理步驟,并通過status區分了undone、active、done3種狀态。

問題

為組件設置好Map對象steps,一共初始化了6個狀态,用status進行了初始測試:

vue前端如何遍曆後端數據(V-FOR數據不刷新填坑記)3

然後發現組件的數據發生變化時,V-FOR不更新,查了一下,是複雜對象的數據刷新機制問題。

解決方法

初步将key進行了一下動态跟随,沒有效果,然後使用watch進行賦值也不行,最後在父組件中調用子組件的數據刷新函數,問題解決。

vue前端如何遍曆後端數據(V-FOR數據不刷新填坑記)4

總結

Vue2中發布訂閱模式使用的是Object.defineProperty()方法來監聽數據的改變,而這個方法的缺陷就是一定情況下(如初始對象屬性未定義、V-FOR、數組特定值變化)無法監聽數據變動,在Vue3中該問題已解決,但在Vue2中大家務必要注意該問題的規避。

如果大家有更高效的方法,歡迎随時交流;如有不當之處,也敬請指正。

#頭條創作挑戰賽##前端#

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved