angular髒值偵測與vue資料劫持的差異是什麼

區別：1、angular髒值偵測原理上支援低階IE，理論上相容性較好；vue資料劫持需要支援ES5的瀏覽器。 2.angular髒值偵測適合大數據量的更新；vue資料劫持適合小資料量的更新。

相關推薦：《angular教學》、《vue.js教學》

實作資料綁定的做法大致有以下幾種：

• #發佈者-訂閱者模式（backbone.js）

• 髒值檢查（angular.js）

• 資料劫持（vue.js）

angular中的髒值偵測

angular.js 是透過髒值偵測的方式比對資料是否有變更，來決定是否更新視圖，最簡單的方式就是透過setInterval() 定時輪詢偵測資料變動，當然Google不會這麼low，angular只有在指定的事件觸發時進入髒值檢測，大致如下：

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

• XHR回應事件( $http )

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

• #Timer事件( interval )

• 執行apply()

##優缺點

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

• #適合大數據量的更新， CPU層面的時間複雜度為O(VModel)，小量更新的diff有運算浪費

• 可考慮配合類別Immutable.js的輪子與思想優化，類似React Redux Immer

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

vue中的資料劫持

資料劫持主要透過ES5 提供的Object.defineProperty方法來實現，監控對資料的操作，從而可以自動觸發資料同步。並且，由於是在不同的資料上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的資料都執行一次檢測。

資料與視圖的綁定與同步，最終體現在資料的讀寫處理過程中，也就是 Object.defineProperty() 定義的資料 set、get 函數中。

優缺點

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

• 適合小資料量（細顆粒度）的更新，CPU層面的時間複雜度為O(Change)，代價是更多的記憶體佔用（空間換時間）

• 減少依賴收集的顆粒度（從關心某屬性變了，改為只關心某個物件變了）能優化記憶體問題

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

兩者差異

##angular髒值偵測原理上支援低階IE（記得最早的NG支援IE8），理論上相容性較好；而vue資料劫持需要支援ES5的瀏覽器。

angular髒值偵測適合大數據量的更新；而vue資料劫持適合小資料量（細顆粒度）的更新。

相關推薦：

######2020年前端vue面試題大匯總（附答案）############vue教程推薦：2020最新的5個vue.js影片教學精選############更多程式相關知識，請造訪：###程式設計入門###！ ！ ######

以上是angular髒值偵測與vue資料劫持的差異是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！