-
單向數據綁定:先有寫好的模板,然后把模板和數據(可能來自后台數據)整合到一起形成HTML代碼,再將HTML代碼插入到文檔流里
單向數據綁定缺點:HTML代碼生成完后就難以改變,如果有新數據就必須把之前的HTML代碼去掉,讓新數據和模板重新整合插入到文檔流里
-
雙向數據綁定:數據模型和視圖之間的雙向綁定,用戶在視圖上的修改會自動同步到數據模型中去,同樣的,如果數據模型中的值發生了變化,也會立刻同步到視圖中去
雙向數據綁定優點:無需進行和單向數據綁定的那些CRUD(Create,Retrieve,Update,Delete)操作
雙向數據綁定最經常的應用場景:表單,當用戶在前端頁面完成輸入后,不用任何操作,我們就已經拿到了用戶的數據存放到數據模型中了
目前,實現雙向數據綁定的前端框架主要有AngularJS,VueJS(通過引入vuex來實現單項的數據監控)等
雙向數據綁定缺點:Angular實現雙向綁定的原理就是通過$watch來進行臟檢查,如果是大量的檢查就會低效率
-
單向數據綁定和雙向數據綁定應用場景:
單向綁定的優點是相應的可以帶來單向數據流,這樣做的好處是所有狀態變化都可以被記錄、跟蹤,狀態變化通過手動調用通知,源頭易追溯,沒有“暗箱操作”。同時組件數據只有唯一的入口和出口,使得程序更直觀更容易理解,有利於應用的可維護性。缺點則是代碼量會相應的增加,數據流轉過程變長,從而出現很多類似的樣板代碼。同時由於對應用狀態獨立管理的嚴格要求(單一的全局store),在處理局部狀態較多的場景時(如用戶輸入交互較多的“富表單型”應用),會顯得啰嗦及繁瑣。
雙向綁定的優點是在表單交互較多的場景下,會簡化大量業務無關的代碼。缺點就是由於都是“暗箱操作”,我們無法追蹤局部狀態的變化(雖然大部分情況下我們並不關心),潛在的行為太多也增加了出錯時 debug 的難度。同時由於組件數據變化來源入口變得可能不止一個,新手玩家很容易將數據流轉方向弄得紊亂,如果再缺乏一些“管制”手段,最后就很容易因為一處錯誤操作造成應用雪崩。
總結:我們要通過自己的業務場景合理的選擇單雙向數據綁定機制