What is vue.js

Vue.js is to provide a two-way data binding MVVM library, focusing on UI level, the core idea is: data-driven components of the system.

Data driven:

Vue.js data observed on the principle of technology, use of memory is ES5Object.defineProperty and attributes: getter and setter (it is only compatible with IE9 and above), may be referred to the observation mechanism based on dependency collected. Core VM, namely ViewModel, ensure data consistency and views.

watcher: each instruction will have to observe the target data corresponding to a called Watcher, such as v-text = "msg", {{msg}}, that is, two watcher, watcher object comprises association to be rendered DOM elements.

1 <div id="app"> 
2 {{ message }}
 3 </div> 
4 var app = new Vue({
 5    el: '#app',
 6      data: {
 7       message: 'Hello Vue!'
 8 
     }
 9 
  })

Based on the principle observation mechanism relies collected:

The native data is transformed into an "observable object", typically, data call defineProperty changed data object attribute memory. An object can be observed values ​​getter, it can also be assigned setter.
2 parsing template, which is in the process of evaluation of the watcher, each of which is the value of the object will be observed the current watcher register yourself as a subscriber, and become a watcher of dependence.
3 when a dependent is observable object is assigned, it will notify all subscribers to notify their watcher re-evaluated, and trigger an update that DOM watcher object associated with the change rendering. 

Dependent advantage that can be accurately collected, actively tracking data changes, no manual trigger or scope watcher are all evaluated (Angular dirty check mode realized disadvantage). Particular, for an array, the array need to monitor changes in the method by the variable array package (for example push). In the Add / Remove attribute, or modify the array elements specific location, but also need to call a specific function, such as obj. $ Add (key, value) to trigger the update. This is the language of resistance for ES5 limited.

Components of the system:

All application class can be seen by the UI component tree configuration.

Register a component:

Vue.component('my-component', {
// 模板 template: '<div>{{msg}} {{privateMsg}}</div>',
//接受参数
props: { msg: String },
// 私有数据，需要在函数中返回以避免多个实例共享一个对象
data: function () {
            return {
                    privateMsg: 'component!'
                }
        }
        })
<my-component msg="hello"></my-component>

 

The core component options

1 template (template): template data and the final statement presented to the mapping relationship between the user's DOM.
2 the initial data (data): a component of the initial data state. For the reusable components, this is usually a private state.
External parameters (props) 3 acceptable: to be passed between the components and data sharing parameter.
Method 4 (methods): to change the operation data are generally carried out in the method of assembly.
5 Life Cycle hook function (lifecycle hooks): A component will trigger more lifecycle hook function, the latest version 2.0 for the life cycle of the function name changed greatly.
6 private resources (assets): Vue.js which user-defined instructions, filters, and other components referred to as resources. A component can declare their own private resources. Only the private resources of its components and sub-assemblies can be called.

Webpack is an open front-end module build tool, it provides a powerful pre-loader API defined for different logical file format, which is the basis .vue single file extension assembly form. So based on this, especially the development of vue-loader allows the template, style, integrate the three elements of logic in the same file, the file suffix .vue to form a single assembly file format for easy reference architecture and development projects.

Other features:

1 DOM asynchronous batch update: When large amounts of data changes, all affected watcher will be pushed to a queue and will promote each watcher queue once. The queue will be executed asynchronously in a tick process. This mechanism avoids unnecessary DOM manipulation of many changes produce the same data, we can ensure that all DOM together to perform write operations to avoid layout DOM may lead the reader to switch.
2 animation system: Vue.js provides a simple yet powerful animation system, when a change in the visibility of elements, not only the user can simply define CSS Transition Animation effect or correspondence, you can also take advantage of the rich JavaScript hook function more Animating the ground floor.
Scalability 3: In addition to the custom instruction, and the filter assembly, Vue.js mixin also provides a flexible mechanism for allowing users to reuse common characteristic in the plurality of components.

to sum up:

Vuejs learning curve is very flat, mainly the document is too good, and circumstantial evidence of the designer-turned-programmers how terrible. Which is lightweight, high-performance characteristics, the moving scene also have a good fit. More importantly, a complete system design components and supporting build tools, plug-ins, making Vue.js in retained its simple API, but also has the ability to fully take on the development of large, complex applications.