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