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

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

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


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

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

雙向數(shù)據(jù)綁定,帶來(lái)雙向數(shù)據(jù)流虐拓。AngularJS2添加了單向數(shù)據(jù)綁定
數(shù)據(jù)模型(Module)和視圖(View)之間的雙向綁定心俗。無(wú)論數(shù)據(jù)改變,或是用戶(hù)操作侯嘀,都能帶來(lái)互相的變動(dòng)另凌,自動(dòng)更新谱轨。適用于項(xiàng)目細(xì)節(jié),如:UI控件中(通常是類(lèi)表單操作)吠谢。


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

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.

參見(jiàn):
單向數(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)系作者
  • 序言:七十年代末呼奢,一起剝皮案震驚了整個(gè)濱河市宜雀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌握础,老刑警劉巖辐董,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異禀综,居然都是意外死亡简烘,警方通過(guò)查閱死者的電腦和手機(jī)苔严,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)孤澎,“玉大人届氢,你說(shuō)我怎么就攤上這事「残瘢” “怎么了退子?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)型将。 經(jīng)常有香客問(wèn)我寂祥,道長(zhǎng),這世上最難降的妖魔是什么七兜? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任丸凭,我火速辦了婚禮,結(jié)果婚禮上腕铸,老公的妹妹穿的比我還像新娘贮乳。我一直安慰自己,他們只是感情好恬惯,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布向拆。 她就那樣靜靜地躺著,像睡著了一般酪耳。 火紅的嫁衣襯著肌膚如雪浓恳。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,156評(píng)論 1 308
  • 那天碗暗,我揣著相機(jī)與錄音颈将,去河邊找鬼。 笑死言疗,一個(gè)胖子當(dāng)著我的面吹牛晴圾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播噪奄,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼死姚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了勤篮?” 一聲冷哼從身側(cè)響起都毒,我...
    開(kāi)封第一講書(shū)人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎碰缔,沒(méi)想到半個(gè)月后账劲,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年瀑焦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腌且。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡榛瓮,死狀恐怖铺董,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情榆芦,我是刑警寧澤柄粹,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站匆绣,受9級(jí)特大地震影響驻右,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜崎淳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一堪夭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拣凹,春花似錦森爽、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至菊匿,卻和暖如春付呕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跌捆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工徽职, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人佩厚。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓姆钉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親抄瓦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子潮瓶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

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