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

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務鏡湖,10多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

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

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

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

• 臟值檢查（angular.js）

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

angular中的臟值檢測

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

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

• XHR響應事件 ( $http )

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

• Timer事件( interval )

• 執(zhí)行 apply()

優(yōu)缺點

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

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

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

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

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

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

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

優(yōu)缺點

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

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

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

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

兩者區(qū)別

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享angular臟值檢測與vue數(shù)據(jù)劫持有哪些區(qū)別內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設公司，，詳細的解決方法等著你來學習!

文章名稱：angular臟值檢測與vue數(shù)據(jù)劫持有哪些區(qū)別-創(chuàng)新互聯(lián)
標題來源：http://chinadenli.net/article18/pohdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、微信小程序、定制開發(fā)、云服務器、標簽優(yōu)化、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)