angular vue react原理解析

angular:雙向數據綁定

髒數據監測：

在Angular中，有$apply和$digest兩個函數：

$apply能夠帶參數，它能夠接受一個函數，而後在應用數據以後，調用這個函數。

digest將會遍歷咱們的$watch：

• 嘿，$watch，你的值是什麼？
  • 是9。
• 好的，它改變過嗎？
  • 沒有，先生。
• （這個變量沒變過，那下一個）
• 你呢，你的值是多少？
  • 報告，是Foo。
• 剛纔改變過沒？
  • 改變過，剛纔是Bar。
• （很好，咱們有DOM須要更新了）
• 繼續詢問知道$watch隊列都檢查過。

由於Angular的設計，同一時間只容許一個$digest運行，而ng-click這種內置指令已經觸發了$digest，當前的尚未走完，因此就出錯了。

 

 

vue:雙向數據綁定

 

數據屬性:數據屬性包含一個數據值的位置,在這個位置能夠讀取和寫入值.

 

訪問器屬性:訪問器屬性不包含數據值;他們包含一對getter和setter函數在讀取訪問器屬性時,會調用getter函數,這個函數負責返回有效的值,在寫入訪問器屬性時,會調用setter函數並傳入新值.

 

設置對象的訪問器屬性只能用es5的Object.defineProrerty()方法

每一個屬性都有get和set方法,在作雙向的數據的控制都在get和set方法中,由於不管你是在ready(2.0是mounted了)或是在view中改變值都會觸發set方法,將新值複製進去,在從新在view中匹配值,固然大家有更復雜的控制操做,get方法着是讓ready中獲取的這個屬性值一直保存最新值.

 

 

每當 new 一個 Vue，主要作了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。

 

       在監聽數據的過程當中，會爲 data 中的每個屬性生成一個主題對象 dep。

 

       在編譯 HTML 的過程當中，會爲每一個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將本身添加到相應屬性的 dep 中。

 

       咱們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。

 

不管是angular仍是vue，對於動態綁定的從新渲染，取決與model的數值變化，而react則是虛擬樹的比較。咱們來看看react的渲染流程。

1.建立一棵虛擬的dom樹。
2.渲染到真實dom中。
3.model數據變化，告訴react從新在內存中生成新的虛擬dom樹。
4.新的虛擬dom樹與舊的dom樹進行對比，提取兩棵樹不一樣的節點部分。
5.將變化部分，渲染到真實的dom上。

 每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。

並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併

 雙向綁定和單項綁定

只有 UI控件 才存在雙向，非 UI控件 只有單向

 

回到問題上，單向數據綁定和雙向數據綁定的優缺點，適合什麼場景？

答：
單向綁定的優勢是相應的能夠帶來單向數據流，這樣作的好處是全部狀態變化均可以被記錄、跟蹤，狀態變化經過手動調用通知，源頭易追溯，沒有「暗箱操做」。同時組件數據只有惟一的入口和出口，使得程序更直觀更容易理解，有利於應用的可維護性。缺點則是代碼量會相應的上升，數據的流轉過程變長，從而出現不少相似的樣板代碼。同時因爲對應用狀態獨立管理的嚴格要求(單一的全局store)，在處理局部狀態較多的場景時(如用戶輸入交互較多的「富表單型」應用)，會顯得囉嗦及繁瑣。

基本上雙向綁定的優缺點就是單向綁定的鏡像了。優勢是在表單交互較多的場景下，會簡化大量業務無關的代碼。缺點就是因爲都是「暗箱操做」，咱們沒法追蹤局部狀態的變化(雖然大部分狀況下咱們並不關心)，潛在的行爲太多也增長了出錯時 debug 的難度。同時因爲組件數據變化來源入口變得可能不止一個，新手玩家很容易將數據流轉方向弄得紊亂，若是再缺少一些「管制」手段，最後就很容易由於一處錯誤操做形成應用雪崩。

 

 

什麼時候觸發

髒值檢查: angular.js 是經過髒值檢測的方式比對數據是否有變動，來決定是否更新視圖，最簡單的方式就是經過 setInterval() 定時輪詢檢測數據變更，固然Google不會這麼low，angular只有在指定的事件觸發時進入髒值檢測，大體以下：

• DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )
• XHR響應事件 ( $http )
• 瀏覽器Location變動事件 ( $location )
• Timer事件( $timeout , $interval )
• 執行 $digest() 或 $apply()

數據劫持: vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

 

React 和 Vue 有許多類似之處，它們都有：

• 使用 Virtual DOM
• 提供了響應式（Reactive）和組件化（Composable）的視圖組件。
• 將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫。

 性能渲染

 

In React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.

 

To avoid unnecessary re-renders of child components, you need to implementshouldComponentUpdate everywhere and use immutable data structures. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

翻譯：

在React，當組件的state發生變化，它將觸發從新呈現整個組件的子樹,從該組件做爲根。

爲了不沒必要要的子組件從新呈現，你須要去執行shouldComponentUpdate隨時隨地，使用不可變的數據結構，

在Vue,組件的依賴關係自動跟蹤在渲染,所以系統清楚地知道哪些組件實際上須要從新呈現。

 

這意味着，未經優化的 Vue 相比未經優化的 React 要快的多。因爲 Vue 改進過渲染性能，甚至全面優化過的 React 一般也會慢於開箱即用的 Vue。

 

假如你要開發一個對性能要求比較高的數據可視化或者動畫的應用時，你須要瞭解到下面這點：在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。

 

這是因爲 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。咱們一樣認爲這些是很重要的，可是咱們在實現這些檢查時，也更加密切地關注了性能方面。

 

HTML&CSS

在 React 中，它們都是 JavaScript 編寫的，聽起來這十分簡單和優雅。然而不幸的事實是，JavaScript 內的 HTML 和 CSS 會產生不少痛點。在 Vue 中咱們採用 Web 技術並在其上進行擴展。接下來將經過一些實例向你展現這意味的是什麼。

JSX:

 

• 你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。
• 工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的（好比，linting、類型檢查、編輯器的自動完成）。

在 Vue 中，因爲有時須要用這些功能，咱們也提供了渲染功能 而且支持了 JSX。然而，對於大多數組件來講，渲染功能是不推薦使用了。

• 在寫模板的過程當中，樣式風格已定並涉及更少的功能實現。
• 模板老是會被聲明的。
• 模板中任何 HTML 語法都是有效的。
• 閱讀起來更貼合英語（好比，for each item in items）。
• 不須要高級版本的 JavaScript 語法，來增長可讀性。 

規模

二者另外一個重要差別是，Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。

本地渲染

ReactNative 能使你用相同的組件模型編寫有本地渲染能力的 APP（IOS 和 Android）。能同時跨多平臺開發，對開發者是很是棒的。相應地，Vue 和 Weex 會進行官方合做，Weex 是阿里的跨平臺用戶界面開發框架，Weex 的 JavaScript 框架運行時用的就是 Vue。這意味着在 Weex 的幫助下，你使用 Vue 語法開發的組件不只僅能夠運行在瀏覽器端，還能被用於開發 IOS 和 Android 上的原生應用。