單向數(shù)據(jù)綁定【單向數(shù)據(jù)流】與雙向數(shù)據(jù)綁定【雙向數(shù)據(jù)流】

單向數(shù)據(jù)綁定

單向數(shù)據(jù)綁定,帶來單向數(shù)據(jù)流。。
指的是我們先把模板寫好,然后把模板和數(shù)據(jù)(數(shù)據(jù)可能來自后臺(tái))整合到一起形成HTML代碼,然后把這段HTML代碼插入到文檔流里面。適用于整體項(xiàng)目,并于追溯。


優(yōu)點(diǎn):
1. 所有狀態(tài)的改變可記錄、可跟蹤,源頭易追溯;
2. 所有數(shù)據(jù)只有一份,組件數(shù)據(jù)只有唯一的入口和出口,使得程序更直觀更容易理解,有利于應(yīng)用的可維護(hù)性;
3. 一旦數(shù)據(jù)變化,就去更新頁面(data-頁面),但是沒有(頁面-data);
4. 如果用戶在頁面上做了變動(dòng),那么就手動(dòng)收集起來(雙向是自動(dòng)),合并到原有的數(shù)據(jù)中。
方神:雙向綁定 = 單向綁定 + UI事件監(jiān)聽,可了解vuex
缺點(diǎn):
1. HTML代碼渲染完成,無法改變,有新數(shù)據(jù),就須把舊HTML代碼去掉,整合新數(shù)據(jù)和模板重新渲染;
2. 代碼量上升,數(shù)據(jù)流轉(zhuǎn)過程變長,出現(xiàn)很多類似的樣板代碼;
3. 同時(shí)由于對(duì)應(yīng)用狀態(tài)獨(dú)立管理的嚴(yán)格要求(單一的全局store),在處理局部狀態(tài)較多的場(chǎng)景時(shí)(如用戶輸入交互較多的“富表單型”應(yīng)用),會(huì)顯得啰嗦及繁瑣。

雙向數(shù)據(jù)綁定

雙向數(shù)據(jù)綁定,帶來雙向數(shù)據(jù)流。AngularJS2添加了單向數(shù)據(jù)綁定
數(shù)據(jù)模型(Module)和視圖(View)之間的雙向綁定。無論數(shù)據(jù)改變,或是用戶操作,都能帶來互相的變動(dòng),自動(dòng)更新。適用于項(xiàng)目細(xì)節(jié),如:UI控件中(通常是類表單操作)。


優(yōu)點(diǎn):
1. 用戶在視圖上的修改會(huì)自動(dòng)同步到數(shù)據(jù)模型中去,數(shù)據(jù)模型中值的變化也會(huì)立刻同步到視圖中去;
2. 無需進(jìn)行和單向數(shù)據(jù)綁定的那些CRUD(Create,Retrieve,Update,Delete)操作;
3. 在表單交互較多的場(chǎng)景下,會(huì)簡化大量業(yè)務(wù)無關(guān)的代碼。
缺點(diǎn):
1. 無法追蹤局部狀態(tài)的變化;
2. “暗箱操作”,增加了出錯(cuò)時(shí) debug 的難度;
3. 由于組件數(shù)據(jù)變化來源入口變得可能不止一個(gè),數(shù)據(jù)流轉(zhuǎn)方向易紊亂,若再缺乏“管制”手段,血崩。
雙向數(shù)據(jù)綁定,Angular使用臟檢查“digest” - “dirty checking”
(在angular中,他沒有辦法判斷你的數(shù)據(jù)是否做了更改, 所以它設(shè)置了一些條件,當(dāng)你觸發(fā)了這些條件之后,它就執(zhí)行一個(gè)檢測(cè)來遍歷所有的數(shù)據(jù),對(duì)比你更改了地方,然后執(zhí)行變化。這個(gè)檢查很不科學(xué)。而且效率不高,有很多多余的地方,所以官方稱為臟檢查)

Angular defines a concept of a so called digest cycle. This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are explicitly telling Angular to monitor the changes on myVar in each iteration of the loop.
——
This "digest" is also called "dirty checking", because, in a way, it scans the scope for changes. I cannot say if it's for better or for worse than observable pattern. It depends on your needs.

參見:
單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定的優(yōu)缺點(diǎn),適合什么場(chǎng)景?
雙向數(shù)據(jù)綁定與單向數(shù)據(jù)綁定
單項(xiàng)數(shù)據(jù)綁定、雙向數(shù)據(jù)綁定及其原理(臟檢查)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Angular面試題 一、ng-show/ng-hide與ng-if的區(qū)別? 第一點(diǎn)區(qū)別是,ng-if在后面表達(dá)式...
    w_zhuan閱讀 5,708評(píng)論 0 26
  • 學(xué)習(xí)資料來自 Angular.cn 與 Angular.io。 模板語法 在線例子 在 Angular 中,組件扮...
    小鐳Ra閱讀 3,983評(píng)論 0 3
  • 我,絕對(duì)是個(gè)文盲。 最近我把一個(gè)叫西西弗斯健忘癥的公眾號(hào)文章全部讀了一遍,又進(jìn)了豆瓣反復(fù)讀了幾遍她的文。還拜讀了幾...
    輕飛舞閱讀 914評(píng)論 0 50
  • 今天下班回家的時(shí)候,剛吃完一根千層雪的冰棍心里美美地,正要找個(gè)垃圾桶把手里的垃圾扔了的時(shí)候,突然腳下一空,回頭一看...
    秋隅閱讀 593評(píng)論 0 0
  • 老爸今年64了,扳起手指算算,和老爸一起生活的日子不過8年,其中有3年完全不記事,有4年基本沒印象!還有一年是我婚...
    蔡蔡要幸福閱讀 550評(píng)論 4 3

友情鏈接更多精彩內(nèi)容