A simple summary of Vue JS

This article mainly summarizes the understanding of Vue:

Reference Source: http://blog.csdn.net/generon/article/details/72482844

Vue.js is a set of progressive frameworks for building user interfaces whose core libraries focus only on the view layer. It is lighter and easier to get started than the rest of the framework, and is better for performance than most frameworks.

However, there are deficiencies: for example, can not support IE8 and the following version of IE.

The characteristics of Vue.js are as follows:

1. Lightweight framework

2. Bidirectional data binding

3. Directives

4. Plug-in

Vue's current development model has two main types:
1. Direct page-level development, script directly into Vue
2. Engineering development, Webpack+loader or direct use of scaffolding tools VUE-CLI, the files are all configured

Webpack can be configured to configure multiple file portals for multi-page development

The rendering process is roughly divided into the following steps:

1. New Vue, performing initialization
2. Mount $mount method, generate the Render function by customizing the Render method, template, El, etc.
3. Monitoring of data changes through watcher
4. The render function executes the generated Vnode object when the data is changed
5. Through the patch method, compare the old and new Vnode objects, add, modify, delete the real DOM elements through the DOM diff algorithm.

Let's say that Vue has three rendering modes:

1. Custom Render function

1.vue.component (' anchored-heading ', {2.    Render:function (createelement) {3.        Return createelement (4.            ') H ' + this.level,   //Tag name 5.            this. $slots. Array in default/Sub-component 6.        ) 7.    },8.    Props: {9. Level        : {Ten.            type:number,11.            Required:true12.        }    }14.})

　　

2. Template wording

1.var vm = new Vue ({2.    Data: {3.        //Declare ' MSG ' 4 with a null value.        Msg: "5.    },6.    Template: ' <div>{{msg}}</div> ' 7.})

　　

3. El notation

1.var app = new Vue ({2.    El: ' #app ', 3.    data: {4.        message: ' Hello vue! ' 5.    }6.})

All three rendering modes are ultimately going to get the render function. Only the user-defined render function eliminates the process of program analysis, equivalent to the processed render function, and the Normal template or El is just a string, need to parse into an AST, and then convert the AST to the render function.

Remember that either way, you have to get the render function.

We use the process of the specific use of which method of invocation, according to the specific needs.

• If it is relatively simple logic, using template and El is better, because both of these are declarative rendering, it is easier for users to understand, but the flexibility is poor, because the resulting render function is determined by the program through the AST analysis of the optimization obtained;

• The use of custom render functions is equivalent to a person has translated logic to the program, capable of complex logic, high flexibility, but the user's understanding is relatively close.

Life cycle:

Beforecreate (before creation)

Created (after creation)

Beforemount (pre-loading)

Mounted (after loading)

BeforeUpdate (before update)

Updated (after update)

Beforedestroy (before destruction)

Destroyed (after destruction)

A simple summary of Vue JS