1. The framework is to solve the complexity of development. Vue framework is to simplify template rendering, event binding and user interaction.
Vue is the MVVM Model, that is, View - View Model - Model.
With Vue's ViewModel, data and data related interfaces are linked, and the bridge in the middle is ViewModel.
2. When creating a new Vue instance [new Vue()], an object containing data, template, Mount element, method, life cycle hook, etc. is passed in () brackets, which are added to Vue's response system.
Responsive system, that is, you can change the view (update rendering) by modifying the value of the attribute.
3. V2.0 uses object.defineproperty to complete the data response (the disadvantage is that it is unable to perceive the new objects or new properties).
Object.defineProperty(obj, prop, descriptor)
obj: the object whose attribute needs to be defined
prop: attribute to be defined
Descriptor: the description descriptor of the attribute
Return value: returns this object
① use Object.defineProperty to convert object properties into getters / setters to intercept object assignment and value taking operations, which is called Observer;
② parse the DOM, extract the instructions and placeholders, and assign different operations, which is called Compiler;
③ associate the parsing result of Compile with the object in the Observer. The Observer monitors the change of image data, receives the notification and updates the DOM, which is called Watcher;
④. Establish a public object portal to receive, configure and coordinate the three, which is Vue.
V3.0 uses class proxy to complete data response.
4. Many vues begin with $and begin with_ (underscore), which starts with $and can be used by developers_ Those beginning with an underscore are built-in and are not recommended for developers.
5. In order to improve rendering efficiency, Vue will compile the template into a virtual DOM tree (the virtual DOM tree must be a single root), and then produce a real DOM tree.
When the data changes, it will be recompiled into a virtual DOM tree, and then the two virtual DOM trees before and after will be compared, and only the difference will be reflected in the real dom. In this way, the real DOM can be changed to a minimum and the rendering efficiency of the page can be improved.
The contrast algorithm is diff algorithm.
vue can produce virtual DOM trees in three ways:
① write inside the loading element, that is, outerHTML as the template;
② write in template;
③ create virtual node tree directly with function in render.
The priority is gradually increased from top to bottom.
6. VUE injection (i.e. mounting and binding) is to bind this and data response. You can also mount after all settings are completed, vm.$mount("#demo");
Data freezing (setting data object as protection) must be performed before mounting and after mounting. It is invalid.
7. Life cycle diagram of Vue
You can experience the life cycle diagram of Vue in the code (plus the event function processing you want to see):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js Basic grammar of</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="demo"> {} <input type="button" value="change" @click="change"> </div> <script> //Remove warning Vue.config.productionTip=false; var FixedObj={ message:'hello，Vue!', NowTime:new Date() }; var methods={ change(){ this.message='hello VsCode!' }, } //The data freezing instruction must be executed before mounting. Once the instruction is bound and executed again, it will become invalid //Object.freeze(FixedObj); var vm=new Vue({ el:"#demo ", / / bind upon mounting data:FixedObj, methods, created:function(){ console.log('After initialization:'+this.message+" Time:"+this.NowTime) }, mounted:function(){ console.log('After binding:'+this.message+" Time:"+this.NowTime) }, updated:function(){ console.log('After modification:'+this.message+" Time:"+this.NowTime) } }) </script> </body> </html>