Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the main differences between VUE.JS". In daily operation, I believe many people have doubts about the main differences between VUE.JS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the main differences between VUE.JS?" Next, please follow the editor to study!

Preface

Vue.js is an open source JavaScript framework for creating user interfaces. Use other JavaScript libraries to easily integrate into the project. It can act as a Web framework to help develop advanced one-page applications.

In 2013, an employee of Google Evan You, who worked on one of the projects, concluded that there was no ready-made solution to quickly prototype the complex user interface of Web applications.

React was still in the early stages of development, and the main tools were complex frameworks such as AngularJS or MVC-oriented Backbone.js, which were not very simple, but focused on developing large applications.

To overcome this gap, you begin to develop Vue.js, which is suitable not only for prototyping but also for comprehensive development while keeping it simple.

In theory, Vue.js is a substitute for jQuery. But in fact, Vue.JS competed very successfully with React.JS (the obvious leader in the field of View). From modern popular technologies that solve similar problems, you can also choose Angular and Ember. Each of them has its advantages and disadvantages. However, all of these frameworks can be reduced to one thing in common-the relative complexity of development.

VUE.JS VS other

Vue.JS looks at the best practices for the technologies listed. The Vue team borrowed the idea of virtual DOM from React.JS. This method eliminates direct interaction with the interface node. The initial work was done through its lightweight replica, the virtual DOM.

Only after this change is applied to the real interface node. At the same time, the real DOM tree and its virtual copy are compared. In this way, the differences are revealed, and only the changes are redrawn.

Borrowed two-way data binding from Angular Vue.JS. This allows you to design interfaces: first, declaratively, and secondly, using Vue in the template engine. Such as Haml or Pug. However, it is true that, for example, this approach has been practiced in the Knockout.JS framework.

The Vue.JS kernel, like React, contains only the functionality required to use the interface. As a result, it is compact and can be easily integrated with other technologies, including jQuery, and can even be used to develop simple interfaces.

In addition, Vue has many plug-ins that implement modern methods for developing Web applications. For example, almost all React applications are designed with the state control technology Redux, which is a separate library and implements the magnetic flux architecture.

The practical approach of the Redux library has proved to be very convenient and successful. Therefore, Vue.JS developed its own application state control technology-Vuex.

Vuex draws on the idea of Redux completely, but the library is more integrated with Vue than React and Redux. This translates into speed and convenience.

Main differences of VUE.JS

1. Reactivity

Responsiveness means that the data within the application is directly related to the data in the display, and changes in any part will immediately affect the redrawing of the screen. How to achieve reactivity in React?

In short, all the data we use in our application is stored in state and props, change the data if necessary, then change it through setState, and then React determines which parts of the application depend on the modified data and redraw it.

In Vue.js, a similar approach is used, but with one fundamental difference-each field of data entered by the application uses the

Object.defineProperty

It is divided into setter / acquirer pairs.

With their help, Vue can track the data being read or modified and determine exactly what factors affect the display.

two。 Calculation attribute

There are several component data types in Vue:

Data-basic data

Props-data transferred from the parent component

Calculation-data that can be based on the first two calculations.

The separation of concepts is a simple but convenient idea. Compared with React's approach, the latter has many advantages:

We no longer produce helper methods in the form of getFullName for components.

They are reactive, and on the first calculation, with the help of the extended getter (the principle described in the first paragraph), they collect dependencies and determine when to change which data to recalculate.

They are lazy, that is, they are counted only when they are accessed, not every time they change depending on the data

Caching based on input data.

When working with a large number of samples in Redux, you can achieve similar behavior through Reselect.

3. Built-in flip animation

The idea of easily describing animation in a framework is far from new (ng-animate,ReactCSSTransitionGroup). Use right out of the box to surprise FLIP animation. In short, this is an animation of a moving element when you first know the total position of the moving element and then move it with the help of translation. In Vue, it takes only a few lines of code to get the animation

4. Components and VUE loader

Vue recommends that all component code (js, styles, schemas) be stored in a single file, which is a very unusual approach. We will not judge its comfort, especially if your component is far away from the atom.

But it's a little strange that these components are loaded by webpack through vue-loader, which hides the complexity of your build, allowing you to use your favorite technology ES6,coffeeScript,Sass,postCSS,CSS module, jade (pug), and so on immediately.

And unlike React, we don't need to deal with the new JSX language, we'll continue to use the language we're familiar with or use a completely different HTML generator, such as PUG.

It's not set up, isn't it cool?

5. Slot

The idea of slots comes from Web components and is very simple-if you need to move multiple components in another component, you can specify where to display them.

This approach allows you to make complex components, wrappers, that can be easily abstracted from what is happening internally. So, for example, you can make a layout component with multiple slots:

Shall we look at a real example?

Recently, I was involved in the development of a Cloud Checker service that analyzes cloud services and optimizes their usage.

This is the place to actively use Vue. In the development project design, based on Google Material Design, it is simple, rigorous, and very suitable for this task, but even so, it is very enjoyable and user-friendly.

Therefore, in the preparation phase of writing the front-end part, it was decided to use the ready-made material component framework as the Vuetify. It is intuitive and relatively simple to write templates, and it stores an incredibly large and powerful library of off-the-shelf components that are necessary to create complete off-the-shelf applications from a box.

Advantages and disadvantages of VUE.JS

VUE.JS Professional Edition

After examining the key features of the technology and testing it in practice, you can list the main advantages of the Vue framework:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Vue.js has many similar features to Angular, which can help optimize the processing of HTML blocks that use different components.

Vue.js has a wealth of documentation that captures the developer's learning curve and saves a lot of time developing applications using only the basics of HTML and JavaScript.

Because it is similar to Angular and React in design and architecture, it provides a fast switch with other frameworks in Vue.js.

Vue.js can be used to create single-page applications and more complex Web interfaces. Most importantly, small interactions can be easily integrated into the existing infrastructure without adversely affecting the entire system.

There are no stack requirements, so Vue.JS can be used on any project.

Vue.js weighs about 20 KB, retaining its speed and flexibility, which gives it higher performance than other platforms.

Because all the templates are used and documentation is provided, most of the problems that arise are resolved quickly. Including compared with React, because in most applications that do not have complex interfaces, the full functionality of the framework is a bit redundant.

Based on its simple structure, Vue.js can help you develop fairly large reusable templates without allocating extra time to make them.

Almost all developers who are at least familiar with the front end can find and connect to the project. The lower barriers to entry allow both front-end and back-end developers to use the framework.

Vue allows you to create functional applications that meet all modern standards, requiring minimal new resource connections, and actually cheaper.

Shortcomings of VUE.JS

Compared with React.JS, there are some disadvantages:

The work in the application state is "behind the scenes". It increases the entry threshold for new developers, but for our team, this is not a real disadvantage.

Compared with React or Angular, Vue.js 's market share is still very small, which means that knowledge sharing under this framework is still in its infancy. But it should be pointed out that the trend is changing dramatically, and the momentum of Vue is much faster than other frameworks.

Because Vue.js has a certain Chinese foundation, many elements and instructions are still available in Chinese. This can lead to partial complexity at some stages of development, but more and more materials are translated into English. As for personal experience, our team handled any complex tasks with the help of Vue and encountered no misunderstandings when using the framework.

Despite such flaws in Vue.js 's work, our development team has extensive experience in dealing with technology and is ready to deal with any complex or even onerous task.

At this point, the study of "what are the main differences between VUE.JS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.