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

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

區(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 是通過(guò)臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更，來(lái)決定是否更新視圖，最簡(jiǎn)單的方式就是通過(guò) 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è)問(wèn)題

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

數(shù)據(jù)劫持主要通過(guò) ES5 提供的Object.defineProperty方法來(lái)實(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ù)的讀寫(xiě)處理過(guò)程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。

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

• 使用JavaScript原生特性，但也需要支持ES5的瀏覽器，畢竟前端面向未來(lái)編程，所以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)存問(wèn)題

• 其實(shí)Vue 2就是通過(guò)引入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í)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

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

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

廣告

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