If vue likened to something, then I would compare it long on cell organism, because multicellular organisms have certain levels and structure, but also has a specific structure vue, With small V abuse me a thousand times I V to be small as the mentality of first love, we try to be unbundled vue, see what's inside in the end there!
First, the core elements vue: 1, a data driver (concept) 2, modular programming (thought)
A data driver:
1, Vue.js principle to the observed data technology, utilization and storage properties is ES5Object.defineProperty: getter months the setter (so only compatible ie9 and above), may be referred to as dependent mechanism based on the collected observation. The core is vm, namely ViweModel, ensure data consistency and views.
2, 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 to be rendered includes associated DOM element.
3, based on the principle observation mechanism relies on the collection of
- The native data is transformed into 'observable objects' data objects usually changes call data to the memory defineProperty property, an observation target value getters may be, may be assigned setter.
- In the parsing template, which is the watcher of the evaluation process, each value can be observed objects are the current watcher register yourself as a subscriber, and become a watcher of dependence.
- When one is dependent on 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.
- Advantages: the advantage is that reliance can be accurately collected, active tracking data changes, no manual trigger or scope watcher are all evaluated (angulpushar disadvantage dirty checking implementations), it is specific for an array, by variable method parcel array (such as push) to monitor changes in the array, 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) before departure update, which is the language features es5 limited.
Second, component-based programming (thinking):
1, the components of the core (thought)
- Template (template): template declaration mapping relationship between the data and the final presentation to the user DOM
- Initial data (data): a component of the initial data state. For the reusable components, this is usually a private state
- External parameters (The props) received: between the components used to pass parameters and sharing data
- The method (methods): to change the operation data are generally carried out in the method of assembly
- Lifecycle hook function (lifecycle hooks): more than one component life cycle will start hook function, the latest version 2.0 for the lifecycle name changed greatly
- Private resource source (assets): vue.js among the user-defined command, too sharp, and other components referred to as resources. A component can declare their own private resources, private resources only change the component and its subcomponents can call
2, the statement cycle
- beforeCreate: component instance has just been created, before the component property calculations as previously instantiated data property ( EL No initialization and data .el: undefined; data: undefined; Message: undefined )
- created: component instance is complete, the attribute is already bound, but not generated DOM, $ el attribute does not exist ( the completion of the data initialization data, but not el .el: undefined; data: [Object ] [Object]; message: 'data' )
- beforeMount: Before template compilation / loading ( the initialization is completed and data of .el el: P> {{ Message }} <P />; data: [Object] [Object]; Message: 'data' )
- mounted: After the template compiler / mount (mount completed. EL: P> data <p />; data: [ Object] [Object]; message: ' Data' )
- methods: the definition of an event ( for readability, it is recommended that all events are bound in the methods () {} which, depending on the business dynamic within each hook call )
- beforeUpdate: Before component updates, then the template will be recompiled (mounted output of new data)
- updated: After the component updates
- activated: When the component is activated calling
- deactivated: invoked when the component is removed
- beforeDestroy: call before the destruction of the component
- destroyed: the destruction of the component calls
* Life Cycle summary: ①beforecreated: Here you can add loading start
②created: end here loading, you can also do some initialization, to achieve self-executing function
③mounted: Here initiate backend requests, back data, with the routing hook to do something
④beforeDestroy: Are you sure you want to delete the XX you?
⑤destroyed: the current component has been deleted
3, vue instruction
- v-for: loop
- v-show: show the hidden (display: none / block)
- v-if: Reality and hidden (Dynamic choose whether to mount a DOM tree based on the value of the expression)
- class dynamic binding elements: v-class
- ：class="[num?'red':'green']"
- v-style similar to previous
4, data Listen
- computed: Personal computed that is more suitable as a filter, a change monitor data, returns the new data according to the application logic, which is the essence of the filter may be utilized extended closure
- watch: In order to detect changes in the value of the object inside, you can specify deep in the option parameter: true, note listens array of the time do not need to do so
* Computed / watch / methods difference:
- OP-computed response (only concerned with calculation results)
- listening watch for the operation (can get a new value and old value to deal with some specific logic)
- methods is more pure manual methods defined (more convenient expands the developer's own thinking)
5, shock-router
Concept: Route (that is, pointing to the meaning)
- route: It is a route, home button => home content about buttons => about content
- routes: It is a set route, every day the combination of the above routing, an array is formed
[{Home button => home content}, {about button => about content}]
- router: router is a mechanism, the equivalent of a manager is responsible for managing the route, because routes only defines a set route, it there is static, when the request came true, how do? That is, when the user clicks the home button, which is the router to work, and it will go into the routes look, go home corresponding to the contents, it will display the home page content
Summary: vue.js learning curve is very smooth, mainly the document is too good, and circumstantial evidence of the designer-turned-programmers more terrible, its lightweight, high-performance features for mobile scenarios also have a good fit, more importantly, It is a complete system design components and supporting build tools, plug-ins, making vue.js in retained its simple API, but also has fully capable to take on complex development of large applications.