想要實現一個StepsBar,類似進度條,可以把分步操作的表單按照步驟顯示已完成、進行中、未處理的一個效果,大緻原型如下圖所示:
設計思路
這個比較簡單,隻需通過一個步驟對象進行初始化,并動态設置其步驟狀态就好,在VUE中設計組件如下:
StepsBar中,通過一個Map對象管理步驟,并通過status區分了undone、active、done3種狀态。
問題為組件設置好Map對象steps,一共初始化了6個狀态,用status進行了初始測試:
然後發現組件的數據發生變化時,V-FOR不更新,查了一下,是複雜對象的數據刷新機制問題。
解決方法初步将key進行了一下動态跟随,沒有效果,然後使用watch進行賦值也不行,最後在父組件中調用子組件的數據刷新函數,問題解決。
總結
Vue2中發布訂閱模式使用的是Object.defineProperty()方法來監聽數據的改變,而這個方法的缺陷就是一定情況下(如初始對象屬性未定義、V-FOR、數組特定值變化)無法監聽數據變動,在Vue3中該問題已解決,但在Vue2中大家務必要注意該問題的規避。
如果大家有更高效的方法,歡迎随時交流;如有不當之處,也敬請指正。
#頭條創作挑戰賽##前端#
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!