雙向數據綁定和單項數據綁定的認識

  

參考文章:前端

https://segmentfault.com/q/1010000002511449/a-1020000002514653vue

https://www.zhihu.com/question/49964363/answer/136022879angularjs

單向數據綁定:指的是咱們先把模板寫好,而後把模板和數據(數據可能來自後臺)整合到一塊兒造成HTML代碼,而後把這段HTML代碼插入到文檔流裏面。vuex

單向數據綁定缺點:HTML代碼一旦生成完之後,就沒有辦法再變了,若是有新的數據來了,那就必須把以前的HTML代碼去掉,再從新把新的數據和模板一塊兒整合後插入到文檔流中。segmentfault

雙向數據綁定:數據模型(Module)和視圖(View)之間的雙向綁定。前端框架

用戶在視圖上的修改會自動同步到數據模型中去,一樣的,若是數據模型中的值發生了變化,也會馬上同步到視圖中去。
雙向數據綁定的優勢是無需進行和單向數據綁定的那些CRUD(Create,Retrieve,Update,Delete)操做
雙向數據綁定最常常的應用場景就是表單了,這樣當用戶在前端頁面完成輸入後,不用任何操做,咱們就已經拿到了用戶的數據存放到數據模型中了。
目前。實現雙向數據綁定的前端框架主要有AngularJS,VueJS(經過引入vuex來實現單項的數據監控)等 框架

大名鼎鼎的angular實現雙向綁定的原理就是經過$watch來進行髒檢查,可是這種髒效率很若是是大量的檢查那就不敢想象了。spa

單項數據和雙向數據使用的場景.net

單向綁定的優勢是相應的能夠帶來單向數據流,這樣作的好處是全部狀態變化均可以被記錄、跟蹤,狀態變化經過手動調用通知,源頭易追溯,沒有「暗箱操做」。同時組件數據只有惟一的入口和出口,使得程序更直觀更容易理解,有利於應用的可維護性。缺點則是代碼量會相應的上升,數據的流轉過程變長,從而出現不少相似的樣板代碼。同時因爲對應用狀態獨立管理的嚴格要求(單一的全局store),在處理局部狀態較多的場景時(如用戶輸入交互較多的「富表單型」應用),會顯得囉嗦及繁瑣。

基本上雙向綁定的優缺點就是單向綁定的鏡像了。優勢是在表單交互較多的場景下,會簡化大量業務無關的代碼。缺點就是因爲都是「暗箱操做」,咱們沒法追蹤局部狀態的變化(雖然大部分狀況下咱們並不關心),潛在的行爲太多也增長了出錯時 debug 的難度。同時因爲組件數據變化來源入口變得可能不止一個,新手玩家很容易將數據流轉方向弄得紊亂,若是再缺少一些「管制」手段,最後就很容易由於一處錯誤操做形成應用雪崩。
最後總結咱們要經過本身的業務場景合理的選擇