Many programmers who have used VUE say that “VUE. Js combines the best of angular.js and react.js with the worst of both”.
So, does he really deserve such high praise?
The creator of Vue.js is EvanYou, an outstanding Chinese. The fact that the Chinese have created so little in terms of development tools may be a plus. However, feelings can’t replace actual needs, and VUE’s rise is that it’s a really good framework. Unlike many other programming languages, wySIWYG is a basic feature that makes it a gateway language for beginners.
As we know, John Reisig released the first version of jQuery, ushering in the era of front-end development; Standing on the shoulders of giants, we can see that a number of JS-based frameworks have sprung up, but most of them are short-lived, and with the exception of Angular, React, and Vue, the others are struggling to survive.
Why is there a framework
The existence of everything is due to its needs, its fundamental is to solve some practical problems. The same goes for frameworks, as the VUE authors put it: Frameworks exist to help us deal with complexity.
However, the framework itself is still complicated, as we use a wrench to turn a screw, and a wrench is the framework. It’s a tool, and the tool itself has a learning cost, but it has a much lower learning cost. We used this tool to solve a screw problem that would have been quite complicated without a wrench, the same process we experienced when using a front-end framework to solve a complex project at work.
So it’s natural to choose between the framework we use (tool-wrench) and the problem we want to solve (complexity – screw), and we tend to use a simple tool to solve a complex problem. That’s why frameworks exist.
In this way, we want the framework to get simpler and simpler, and the problems it solves to get more and more complex. Fortunately, things are moving in the direction we want them to.
The current mainstream framework
There are three front-end frameworks that have been discussed a lot at the moment.
Angular, React, Vue
Compare them with their GitHub Star history and NPM download trends.
Angular, React, and Vue GitHub Star
Download trends for NPM:
As you can see on GitHub, Vue has seen the fastest growth and has surpassed React as the most popular front-end framework since June 28, 2018.
In NPM, React is far ahead, thanks to the strong community strength of React. We cannot deny that the React community, as the most active front-end community at present, provides many excellent ideas and concepts, which provide strong ecological support for React. At the same time, we need to make more choices when choosing the surrounding frame.
Of course, all three frameworks are excellent, and we’re not going to argue about their merits, but our choices are based on our own trade-offs: we want the tool to be simple, but the problems it solves to be complex. That’s enough, isn’t it?
Presents expect to do very much, such as it will contain its own routing, we decided to use presents, all will have to accept it, this makes the learning cost becomes higher, but at the same time choice can become less and less but sometimes choose is not a bad thing, it can make us more focused.
React, like Vue, is focused on the interface, while everything else comes with a variety of tools, such as routing or state management tools, so you may have to make more choices with them, which makes the learning curve of React and Vue relatively flat.
As you can see from the above analysis, Angular provides a complex tool for solving a complex set of problems. React and Vue focus on solving a specific problem and leave the rest to their ecosystem, which also allows us to spend more time choosing the right peripheral tools.
So each of these frameworks has its advantages and disadvantages, and there is no absolute good or bad. The tools we choose depend on the problems we face. No one would like to shoot a mosquito with a cannon, and no one would think of shooting an elephant with a fly swatter. We like to be just right and get more with less, and if that’s what you think, then at least we’re on the same page at the bottom.
The characteristics of the Vue
With that said, let’s get back to today’s focus and see what’s so fascinating about the progressive framework that VUE represents.
Mainly from the following aspects:
The MVVM framework
Single-page applications
Lightweight and easy to learn
Progressiveness and compatibility
View componentization
Virtual DOM (Virtual DOM)
Community support
It will be in the future
1. MVVM framework
The MVVM framework is model-view-viewModel, which looks like this:
So this MVVM framework, how to understand? Its first View, which acts as the DOM in the page, and its last Model, which acts as the data source, looks something like this:
The A tag is the DOM, and the data object is the data source. The two never communicate directly, and all their contact is through the ViewModel, the monitor. The monitor is responsible for detecting changes in the data and then displaying the data in real time on the page. For example, if you change the content of text to “Hello Vue”, the content displayed in the A tag will also automatically change to “Hello Vue”. Instead of manually manipulating the DOM, all DOM manipulation is done through the monitor. If you’ve ever written complex DOM manipulations (e.g. *.parent().parent().parent()…) , you will find the convenience brought by this way.
Vue uses this framework form of MVVM and helps us avoid DOM manipulation entirely through declarative rendering and reactive data binding.
2. Single-page applications
Single page application (SPA), generally refers to: a page is an application (or sub-application). With the development of technology, now the front-end web page is not limited to the browser display, mobile phone App, wechat public number have more and more opportunities to display.
So what would traditional multi-page apps look like on our phones? When a page jump opens a new page, it looks like this:
Are the flowers all gone?
This is not the case with single-page development. Because our entire application is a single page, when our single page is loaded in, there are no network requests for that page. Vue and vuE-Router in the ecosystem can be very convenient to develop complex single-page applications.
3. Lightweight and easy to learn
We know that the larger the size of JS introduced in a web page, the longer the loading time will be, whereas the smaller the size, the more time will be saved. So we tend to use smaller JS files, which is why.min JS was introduced in the production version. Here is my screenshot from Vue’s official website:
Taking Vue stable version 2.5.16 as an example, you can see from the screenshot that the production version of Vue is only 30.90KB in size, which has little impact on our webpage loading speed. And because Vue only focuses on the view layer, a single Vue is like a library, which makes learning costs very low.
4. Progressiveness and compatibility
The incremental framework is: I do what I have to do, and I don’t ask too much of you.
Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects.
This is a sentence from Vue’s official website. As stated above, Vue only does the interface and leaves everything else to its surrounding ecosystem, which requires Vue to have maximum compatibility with other frameworks.
, for example, only want to make a static standing at the beginning, then can only introduce the Vue to build interface, after a period of time, you want to add the function of the access to the network on the website, so you can introduce axios (Vue official recommendation) or other request (even jQuery) network framework, and later as the bigger your website, When you want to turn your site into a large Web application, you can import some other JS files that you need, such as loadsh.js, velocity.js, etc.
5. View componentization
View componentization is the splitting of our web pages into components, like the following:
Vue allows you to assemble a page from components, each of which is a reusable Vue instance that can contain its own data, views, and code logic. Such as:
CSDN this personal data module, everybody is not strange, when we have more than one page in our Web applications are used to the personal data module, you can put it in a component, the component has a separate code logic, CSS styles, such as data, we need to use it in any place, can be used
Vue.component(‘component-name’, {
.
});
This is a way to directly introduce.
In addition, many leading companies are using VUE. For example, ele. me, Nuggets, Suning, Meituan, Tmall, Laravel, htmlBurger, etc.
6.Virtual DOM
Virtual DOM is also the Virtual DOM. As we all know, there are performance problems when the browser handles DOM operations. This is also the reason why our pages often appear stuck when we use jQuery or native JavaScript to frequently operate DOM for data rendering.
However, the virtual DOM is calculated and optimized through various operations of JavaScript in advance, and the DOM calculated will be put into our DOM tree after the calculation is completed. This is called the virtual DOM because it does not perform real DOM manipulation.
We said earlier:
Vue helps us completely avoid DOM manipulation through declarative rendering and reactive data binding.
The reason why Vue can completely avoid the DOM operation is that Vue adopts the way of virtual DOM, which not only avoids the complicated DOM operation, but also greatly speeds up the running speed of our application.
7. Community support
Although Vue community is not as prosperous as React community in the world, thanks to the local identity of Vue and the strength of Vue itself, many domestic communities have emerged, such as www.vue-js.com and vuejs.com.cn. This is not the case with other frameworks, which makes learning or using Vue a lot easier.
8. Future trend of Vue
Vue is a library developed by You Yuxi in order to facilitate his work when he was working at Google. In the process of using Vue, he suddenly found that more and more people like it. Therefore, Yu Yu Creek has entered a state of working and maintaining at the same time. In this case, Vue is still developing rapidly.
Now Yu has officially quit his job at Google to maintain Vue full-time, along with dozens of other developers who have worked to make Vue one of the most popular front-end frameworks. As it turns out, Vue is getting better and better (see the Angular/React/Vue comparisons).
So, at least vUE has nothing to worry about in the future, until there is no disruptive innovation, VUE will do better and better.
Original. Front-end prince