Thinking of vue.js and angular in data realization

Vue.js, with its simple API and active community, is friendly to the idea of moving from angular to vue, and intends to take a moment to sort out some of Vue's own thoughts and deepen the impression.

Vue and angular belong to the MVVM framework, and the essence of MVVM is to link the view and model with data binding, so that changes to the data are automatically mapped as updates to the view. Vue.js draws on the angular's instruction mechanism in data-bound API design: Users can implement data binding through HTML attributes with special prefixes, or they can use common curly brace template interpolation, or use two-way binding on form elements:

<!--instruction--><span v-text= "msg" ></span><!--interpolation--><span>{{msg}}</span><!--two-way binding --><input v-model= "MSG" >  

Interpolation is essentially an instruction, just to facilitate the writing of the template. During the compilation of the template, Vue.js creates a directive object for each DOM node that needs to be dynamically updated. Whenever the data observed by a directive object changes, it performs the corresponding DOM operation on the target node being bound. Instruction-based data binding enables specific DOM operations to be properly encapsulated in the instruction definition, where the business code only needs to involve templates and the operation of the data state, which greatly improves the development efficiency and maintainability of the application.

Unlike angular, Vue.js's API does not have the complexity of module, controller, scope, factory, service and other concepts, all with "ViewModel instance" as the basic unit:

<!--templates--><div id= "apps" >    {{msg}}</div>

The native object is data var = {    msg: ' hello! '} Create a ViewModel instance var vm = new Vue ({    //Select Target element    el: ' #app ',    //provide initial data    Data:data})

Render Result:

<div id= "App" >    hello!</div>  

At the same time as the rendering, Vue.js has also completed the dynamic binding of the data: If you change the value of Data.msg, the DOM will be updated automatically. Isn't it very easy to understand? In addition, Vue.js has greatly simplified the API for custom directives and filters, and if you have angular development experience, you can get started very quickly.

Realization of data observation

Angular's data observation uses the "dirty value check mechanism", each instruction will have a corresponding to observe the object changes, this application is called Watcher, a scope may have multiple watcher, when the data changes, the page updates, Angular iterates through all the watcher on the current page, evaluates them, compares them to the previous values, and, if the result of the evaluation changes, triggers the corresponding update, a process called digest cycle. The disadvantage of dirty value checking is also two points:

1. Any data change means that every watcher in the current scope needs to be re-evaluated, so when the number of watcher is large, the performance of the application is inevitably affected and it is difficult to optimize.
2. When data changes, the framework does not proactively detect changes and requires manual digest cycle triggering to trigger the corresponding DOM update. Angular avoids this problem by automatically triggering the digest cycle in the DOM event handler function, but there are still a lot of situations that require the user to trigger manually, which is easy for beginners to have problems and do not know what the situation is.

The Vue.js is based on a dependency collection of observation mechanisms. There is also a saying, called data hijacking, the use of ES5 object.defineproperty (), so it can only be compatible with the environment after IE9. The rationale for this is:

1. Transform the native data into "observable objects". An observable object can be evaluated or assigned to a value.
2. In the evaluation process of watcher, each observable object that is valued will register the current watcher as one of its own subscribers and become a dependency of the current watcher.
3. When a dependent observable is assigned a value, it notifies all subscriptions to its own watcher and triggers the corresponding update.
4. The advantage of dependency collection is the ability to accurately and proactively track changes in data without two problems with the dirty checks mentioned above. However, traditional dependency collection implementations, such as knockout, often need to wrap native data to make observable objects, which need to be in the form of function calls when taking values and assignments, which are cumbersome and not intuitive to use in data manipulation, and that support for objects with complex nested structures is not ideal.

Thinking of vue.js and angular in data realization