What is the difference between angular dirty value detection and vue data hijacking?

Differences: 1. Angular dirty value detection supports low-end IE in principle and has better compatibility in theory; vue data hijacking requires a browser that supports ES5. 2. Angular dirty value detection is suitable for updates with large amounts of data; Vue data hijacking is suitable for updates with small amounts of data.

Related recommendations: "angular tutorial", "vue.js tutorial"

There are several ways to implement data binding:

• Publisher-Subscriber pattern (backbone.js)

• Dirty value check (angular.js)

• Data hijacking (vue.js)

Dirty value detection in angular

angular.js uses dirty value detection to compare whether the data has changed to decide whether to update the view. The simplest way is to regularly poll to detect data changes through setInterval(). Of course Google will not be so slow. Angular only enters dirty value detection when a specified event is triggered, which is roughly as follows:

• DOM events, such as the user inputting text, clicking a button, etc. (ng-click)

• XHR response event ($http)

• Browser Location change event ($location)

• Timer event (interval)

• Execute apply()

Advantages and disadvantages

• In principle, it supports low-end IE (remember that the earliest NG supports IE8), and has better compatibility in theory.

• Suitable for updates with large amounts of data. The time complexity at the CPU level is O(VModel). A small amount of updated diffs is computationally wasteful.

• You can consider optimizing the wheels and ideas of Immutable.js, similar to React Redux Immer

• Needs to be called manually, same as setState, it is more convenient after introducing Zone.js, large granular updates have this problem

Data hijacking in vue

Data hijacking is mainly implemented through the Object.defineProperty method provided by ES5, which monitors operations on data, thereby automatically triggering data synchronization. Moreover, since synchronization is triggered on different data, changes can be accurately sent to the bound view instead of performing a test on all data.

The binding and synchronization of data and views are ultimately reflected in the process of reading and writing data, that is, in the data set and get functions defined by Object.defineProperty().

Advantages and Disadvantages

• Use JavaScript native features, but it also needs a browser that supports ES5. After all, the front-end is oriented to future programming, so Vue 3 plans to upgrade to the Proxy implementation of ES6

• Suitable for updates of small data volumes (fine-grained), the time complexity at the CPU level is O(Change), at the cost of more memory usage (space for time)

• Reducing the granularity of dependency collection (from caring about changes in a certain attribute to only caring about changes in a certain object) can optimize memory problems

• In fact Vue 2 introduces Virtual DOM and uses diff to update at the sub-component level

The difference between the two

angular dirty value detection principle supports low-end IE (remember that the earliest NG supports IE8), and has better compatibility in theory; while vue data hijacking requires a browser that supports ES5.

angular dirty value detection is suitable for updates with large amounts of data; while vue data hijacking is suitable for updates with small amounts of data (fine-grained).

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of What is the difference between angular dirty value detection and vue data hijacking?. For more information, please follow other related articles on the PHP Chinese website!