單向數(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ù)綁定及其原理(臟檢查)