1, Comparison of Vue, angular and react three mainstream frameworks

1. Compared with angular

1. api is simple, quick to start, and low learning cost;
2. Angel uses two-way binding, and Vue also supports two-way binding. However, it is a one-way data flow, and the data is transmitted from the parent component to the child component in one direction
3. Instructions and components are more clearly separated in Vue.js. Instructions only encapsulate DOM operations, while components represent a self-sufficient independent unit with its own view and data logic. In anguar, the two are mixed up in many places
4. The dirty check mechanism of anguar causes the problem of performance degradation if the project is large; Every time the data is updated, all data bindings will be moved and traversed once
5. Vue's data change update is based on the observation system relying on tracking and is updated asynchronously in a queue. Data changes are independent events that trigger the corresponding events in the queue;
6. The rendering layer creates a virtual dom (lightweight, 2.0), which reduces the memory overhead and speeds up the rendering speed;
7. Component-based development, each component has a life cycle to facilitate the maintenance of its own state; The high reusability of the code is realized

2. Compared with react

common ground 1. Using Virtual DOM 2. Provides responsive and componentized view components 3. Focus on the core library and leave other functions such as routing and global state management to the relevant library Advantages: 1. vue's line changing rendering process is tracked automatically. If react wants to improve the update performance, it needs to compare the data through the shouldComponentUpdate hook function; 2. For the syntax of components, in vue, jsx syntax can be supported, css and html can be written into js files, and template template can be used for compilation. During desizing in vue, the template template is used for compilation, which reduces the learning cost and is more in line with the front-end development syntax, while react only supports jsx syntax, Advantages of jsx: 1. Development tools support jsx more advanced than other vue templates 2. Support for css Disadvantages: 1. vue can directly write css syntax in style, support all css attributes such as media query, and can only be written to js files through css style isolation. Simpler styles can be paid, but they cannot be supported if they are more complex

2. Vue summary

Disadvantages: 1. The development mode of mvvm, free from dom, two-way data binding; 2. Asynchronous event mechanism is adopted for data update 3. One way data flow 4. Component development 5. Using virtual dom 6. It supports two development modes: template and jsx 7. Server side rendering can be performed 8. Server side rendering can be performed Disadvantages: 1. Incompatible with ie8 or below 1. The ecosystem is not prosperous and the open source community is not active

2, Scale:

common ground	difference
Both provide routing and state management mechanisms	The learning cost of react is relatively high. You need to master jsx syntax and es2015. Although it supports front-end babel compilation, it is not suitable for production environment
Each has its own automated build tool	vue downward expansion can be used in front-end projects like jq, and upward expansion can be used for automatic front-end construction like react

3, Vue.js component

HTML

 <div id="vueInstance">
       <template id="mineTpl">{{name}} --- {{title}}</template>
       <!-- The name of the referenced component -->
       <login></login>
       <login2></login2>
       <login3></login3>
       <hr>
       <login6></login6>

       <!-- Pay attention here id It is a must, not in instance control divcalss app Write in template -->
       <template id="login3">
           <div>
               <h2>I was created in the third way</h2>
           </div>
       </template>
   </div>

Javascript

 	// The first is to create a global component
    // extend is a registered component function that returns an object
    var comobj = Vue.extend({
        template: "<h1>I am a global component</h1>"
    })
    // The component function submits a component. The first parameter is the name of the component, and the second parameter is an object that registers the component
    Vue.component("login", comobj)


    // The second creation method
    // Write a template object directly in the component
    Vue.component('login2', { template: '<h1>I'm the second v Created components</h1>' });



    // The third way to create a template is to create a template in the element
    Vue.component('login3', { template: '#login3' })
    Vue.component('mine', {
        template: '#mineTpl',
        prpos: ['name', 'title', 'city', 'content']
    })

    new Vue({
        el: "#vueInstance",
        data: {
            name: 'zhang',
            title: 'this is title',
            city: 'Beijing',
            content: 'these are some desc about Blog'
        },
        components: {
            login6: { template: '#login3' }
        }
    })

Operation results