angular臟值檢測(cè)與vue數(shù)據(jù)劫持有哪些區(qū)別

這篇文章主要介紹了angular臟值檢測(cè)與vue數(shù)據(jù)劫持有哪些區(qū)別，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

區(qū)別：1、angular臟值檢測(cè)原理上支持低端IE，理論上兼容性更好；vue數(shù)據(jù)劫持需要支持ES5的瀏覽器。2、angular臟值檢測(cè)適合大數(shù)據(jù)量的更新；vue數(shù)據(jù)劫持適合小數(shù)據(jù)量的更新。

實(shí)現(xiàn)數(shù)據(jù)綁定的做法有大致如下幾種：

• 發(fā)布者-訂閱者模式（backbone.js）

• 臟值檢查（angular.js）

• 數(shù)據(jù)劫持（vue.js）

angular中的臟值檢測(cè)

angular.js 是通過臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更，來決定是否更新視圖，最簡(jiǎn)單的方式就是通過 setInterval() 定時(shí)輪詢檢測(cè)數(shù)據(jù)變動(dòng)，當(dāng)然Google不會(huì)這么low，angular只有在指定的事件觸發(fā)時(shí)進(jìn)入臟值檢測(cè)，大致如下：

• DOM事件，譬如用戶輸入文本，點(diǎn)擊按鈕等。( ng-click )

• XHR響應(yīng)事件 ( $http )

• 瀏覽器Location變更事件 ( $location )

• Timer事件( interval )

• 執(zhí)行 apply()

優(yōu)缺點(diǎn)

• 原理上支持低端IE（記得最早的NG支持IE8），理論上兼容性更好

• 適合大數(shù)據(jù)量的更新，CPU層面的時(shí)間復(fù)雜度為O(VModel)，小量更新的diff有計(jì)算浪費(fèi)

• 可考慮配合類Immutable.js的輪子和思想優(yōu)化，類似React + Redux + Immer

• 需要手動(dòng)調(diào)用，同setState，引入Zone.js后方便一些，大顆粒度更新都有這個(gè)問題

vue中的數(shù)據(jù)劫持

數(shù)據(jù)劫持主要通過 ES5 提供的Object.defineProperty方法來實(shí)現(xiàn)，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。

優(yōu)缺點(diǎn)

• 使用JavaScript原生特性，但也需要支持ES5的瀏覽器，畢竟前端面向未來編程，所以Vue 3計(jì)劃升級(jí)到ES6的Proxy實(shí)現(xiàn)

• 適合小數(shù)據(jù)量（細(xì)顆粒度）的更新 ，CPU層面的時(shí)間復(fù)雜度為O(Change)，代價(jià)是更多的內(nèi)存占用（空間換時(shí)間）

• 減少依賴收集的顆粒度（從關(guān)心某屬性變了，改為只關(guān)心某對(duì)象變了）能優(yōu)化內(nèi)存問題

• 其實(shí)Vue 2就是通過引入Virtual DOM，改為在子組件層面用diff的方式更新

兩者區(qū)別

angular臟值檢測(cè)原理上支持低端IE（記得最早的NG支持IE8），理論上兼容性更好；而vue數(shù)據(jù)劫持需要支持ES5的瀏覽器。

angular臟值檢測(cè)適合大數(shù)據(jù)量的更新；而vue數(shù)據(jù)劫持適合小數(shù)據(jù)量（細(xì)顆粒度）的更新。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享angular臟值檢測(cè)與vue數(shù)據(jù)劫持有哪些區(qū)別內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!