一乏盐、關(guān)于數(shù)據(jù)綁定
- Angular
使用雙向綁定即：界面的操作能實(shí)時(shí)反映到數(shù)據(jù)佳窑，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
原理：
$scope變量中使用臟值檢查來實(shí)現(xiàn)父能。
$scope.$watch函數(shù)神凑，監(jiān)視一個(gè)變量的變化。函數(shù)有三參數(shù)何吝，”要觀察什么”溉委，”在變化時(shí)要發(fā)生什么”,以及你要監(jiān)視的是一個(gè)變量還是一個(gè)對象。
使用ng-model時(shí)爱榕，你可以使用雙向數(shù)據(jù)綁定瓣喊。
調(diào)用$scope.$watch時(shí)只為它傳遞了一個(gè)參數(shù)，無論作用域中的什么東西發(fā)生了變化黔酥，這個(gè)函數(shù)都會被調(diào)用藻三。在ng-model中洪橘，這個(gè)函數(shù)被用來檢查模型和視圖有沒有同步，如果沒有同步棵帽，它將會使用新值來更新模型數(shù)據(jù)熄求。
雙向綁定的三個(gè)重要方法：
$scope.$apply()
$scope.$digest()
$scope.$watch()
（臟檢測）是用來檢查綁定的scope中的對象的狀態(tài)的，例如逗概，在js里創(chuàng)建了一個(gè)對象弟晚，并且把這個(gè)對象綁定在scope下，這樣這個(gè)對象就處于digest loop中逾苫，loop通過遍歷這些對象來發(fā)現(xiàn)他們是否改變卿城，如果改變就會調(diào)用相應(yīng)的處理方法來實(shí)現(xiàn)雙向綁定
- Vue 也支持雙向綁定，默認(rèn)為單向綁定铅搓，數(shù)據(jù)從父組件單向傳給子組件瑟押。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解。
臟檢測的利弊
和ember.js等技術(shù)的getter/setter觀測機(jī)制相比（優(yōu)）：
getter/setter當(dāng)每次對DOM產(chǎn)生變更狸吞，它都要修改DOM樹的結(jié)構(gòu)勉耀，性能影響大，Angular會把批量操作延時(shí)到一次更新蹋偏，性能相對較好。
和Vue相比（呈現(xiàn)劣勢）
Vue.js 有更好的性能至壤，并且非常非常容易優(yōu)化威始，因?yàn)樗皇褂门K檢查。Angular像街，當(dāng) watcher 越來越多時(shí)會變得越來越慢黎棠，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算镰绎。并且脓斩，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次畴栖。 Angular 用戶常常要使用深奧的技術(shù)随静，以解決臟檢查循環(huán)的問題。有時(shí)沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域吗讶。Vue.js 則根本沒有這個(gè)問題燎猛，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步列隊(duì)更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)照皆，除非它們之間有明確的依賴關(guān)系重绷。唯一需要做的優(yōu)化是在 v-for 上使用 track-by膜毁。
React-單向數(shù)據(jù)流
MVVM流的Angular和Vue昭卓，都是通過類似模板的語法愤钾，描述界面狀態(tài)與數(shù)據(jù)的綁定關(guān)系，然后通過內(nèi)部轉(zhuǎn)換候醒，把這個(gè)結(jié)構(gòu)建立起來能颁，當(dāng)界面發(fā)生變化的時(shí)候，按照配置規(guī)則去更新相應(yīng)的數(shù)據(jù)火焰，然后劲装，再根據(jù)配置好的規(guī)則去，從數(shù)據(jù)更新界面狀態(tài)昌简。
React推崇的是函數(shù)式編程和單向數(shù)據(jù)流：給定原始界面（或數(shù)據(jù)）占业，施加一個(gè)變化，就能推導(dǎo)出另外一個(gè)狀態(tài)（界面或者數(shù)據(jù)的更新）纯赎。
React和Vue都可以配合Redux來管理狀態(tài)數(shù)據(jù)谦疾。
二、 視圖渲染
AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入犬金。AngularJS將會遍歷DOM模板, 來生成相應(yīng)的NG指令,所有的指令都負(fù)責(zé)針對view(即HTML中的ng-model)來設(shè)置數(shù)據(jù)綁定念恍。因此, NG框架是在DOM加載完成之后, 才開始起作用的
React 的渲染建立在 Virtual DOM 上——一種在內(nèi)存中描述 DOM 樹狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。當(dāng)狀態(tài)發(fā)生變化時(shí)晚顷，React 重新渲染 Virtual DOM峰伙，比較計(jì)算之后給真實(shí) DOM 打補(bǔ)丁。
Virtual DOM 提供了函數(shù)式的方法描述視圖该默，它不使用數(shù)據(jù)觀察機(jī)制瞳氓，每次更新都會重新渲染整個(gè)應(yīng)用，因此從定義上保證了視圖與數(shù)據(jù)的同步栓袖。它也開辟了 JavaScript 同構(gòu)應(yīng)用的可能性匣摘。
在超大量數(shù)據(jù)的首屏渲染速度上，React 有一定優(yōu)勢裹刮，因?yàn)?Vue 的渲染機(jī)制啟動時(shí)候要做的工作比較多音榜，而且 React 支持服務(wù)端渲染。
React 的 Virtual DOM 也需要優(yōu)化捧弃。復(fù)雜的應(yīng)用里可以選擇 1. 手動添加 shouldComponentUpdate 來避免不需要的 vdom re-render赠叼；2. Components 盡可能都用 pureRenderMixin，然后采用 Flux 結(jié)構(gòu) + Immutable.js塔橡。其實(shí)也不是那么簡單的梅割。相比之下，Vue 由于采用依賴追蹤葛家，默認(rèn)就是優(yōu)化狀態(tài)：動了多少數(shù)據(jù)户辞，就觸發(fā)多少更新，不多也不少癞谒。
React 和 Angular 2 都有服務(wù)端渲染和原生渲染的功能底燎。
Vue.js 不使用 Virtual DOM 而是使用真實(shí) DOM 作為模板刃榨，數(shù)據(jù)綁定到真實(shí)節(jié)點(diǎn)。Vue.js 的應(yīng)用環(huán)境必須提供 DOM双仍。Vue.js 有時(shí)性能會比 React 好**枢希，而且?guī)缀醪挥檬止?yōu)化。
三 朱沃、性能與優(yōu)化
性能方面苞轿，這幾個(gè)主流框架都應(yīng)該可以輕松應(yīng)付大部分常見場景的性能需求，區(qū)別在于可優(yōu)化性和優(yōu)化對于開發(fā)體驗(yàn)的影響逗物。Vue 的話需要加好 track-by 搬卒。React 需要 shouldComponentUpdate 或者全面 Immutable，Angular 2 需要手動指定 change detection strategy翎卓。從整體趨勢上來說契邀，瀏覽器和手機(jī)還會越變越快，框架本身的渲染性能在整個(gè)前端性能優(yōu)化體系中失暴，會漸漸淡化坯门，更多的優(yōu)化點(diǎn)還是在構(gòu)建方式、緩存逗扒、圖片加載古戴、網(wǎng)絡(luò)鏈路、HTTP/2 等方面矩肩。
