编程知识 cdmana.com

Why did we choose Vue to build the front end

Many have used VUE The programmer , Yes VUE The assessment is “Vue.js Both of them angular.js and react.js The advantages of , And get rid of their shortcomings ”.

that , He really deserves such a high evaluation ?

Vue.js Its creator is an outstanding Chinese - Especially the rain creek (EvanYou). In terms of development tools , There are so few Chinese creations , This may add a lot to it . however , After all, feelings can't replace actual needs ,VUE Its rise is that it's really a pretty good framework . It's not as obscure as many other programming languages , What you see is what you get is its basic feature , Because of this characteristic , Many beginners will also use it as an introductory language .
 Why do we choose VUE To build the front end
We know , John · Lesig released jQuery The first version of , From then on, front-end development has entered jQuery Time ; Standing on the shoulders of giants , We can see further , A series based on js The framework of the spring up like bamboo shoots , But mostly it's a flash in the pan , except Angular、React、Vue Beyond the mainstream , The others are struggling to survive .

Why there is a framework

Everything exists because of its needs , Its fundamental purpose is to solve some practical problems . Same thing , So is the framework , It's like vue As the author says : Frameworks exist to help us deal with complexity .

however , There is still complexity in the framework itself , It's like we use a wrench to turn a screw , The wrench is the frame . It's equivalent to a tool , The tool itself has a learning cost , But his study cost is much lower . We use this tool to solve the problem of screwing, which can be quite complicated without a wrench , This is the same process as using the front-end framework to solve a complex project encountered in the work .

therefore , Naturally, it will be in the framework we use ( Tools —— Wrench ) And the problems you want to solve ( Complexity —— screw ) Choose between , We tend to use a simple tool to solve a complex problem , That's what the framework is all about .

such , We just want the framework to become simpler , And the problems it can solve can become more and more complex . Fortunately , It's all moving in the direction we want .

The current mainstream framework

At present, there are mainly three front-end frameworks discussed , Look at the developer's point of view :

Angular、React、Vue

Through them in GitHub Of Star History and NPM Download trend chart to compare .

Angular、React and Vue Of GitHub Star history :

 Why do we choose VUE To build the front end

npm Download trend chart for :

 Why do we choose VUE To build the front end

You can see in the GitHub above ,Vue The fastest rise in the number of , And in 2018 year 6 month 28 The day has passed React, Became the most popular front end framework .

And in the npm in ,React By a long way , Thanks to React Powerful community forces , We can't deny that ,React Community as the most active front-end community , Offers a lot of great ideas and ideas , They are React Provides strong ecological support , At the same time, we need to make more choices when choosing the surrounding framework .

Of course, these three frameworks are excellent , We're not going to talk about their pros and cons , Our choices are all based on our choices : We want the tools to be simple enough , And it can solve problems that are complex enough . That's enough , isn't it? ?

Angular There's a lot to be expected to do , For example, it will contain its own routing , It made us decide to use Angular When , You have to accept all of it , This makes learning more expensive , But at the same time, there will be fewer choices , But sometimes less choice is not a bad thing , It can make us more focused .

React And Vue The same is focused on the interface , And everything else will have all kinds of matching tools , For example, routing , Or state management tools , So if you use them, you may need to make more choices , And in this way they make themselves (React、Vue) The learning curve is relatively gentle .

From the above analysis, we can see that ,Angular Provides a sophisticated tool , Used to solve a complex set of problems . and React And Vue Focus on solving a specific problem , And leave the rest to their biosphere , This will also allow us to spend more time choosing the right peripheral tools .

So each of these frameworks has its own advantages and disadvantages , There is no absolute distinction between the good and the bad , What tools do we choose , It depends on what kind of problems we face . No one would like to shoot mosquitoes with cannons , No one would think of beating an elephant with a fly swatter . We like just right , Pursue twice the result with half the effort , If that's what you think , Well, at least our bottom ideas are the same .

Vue Characteristics

Said so much , Back to today's point , have a look VUE What is the charm of the progressive framework .

Mainly from the following aspects :

MVVM frame

Single page application

Lightweight and easy to learn

Progressive and compatibility

View componentization

fictitious DOM(Virtual DOM)

Community support

The future direction

1.MVVM frame

So-called MVVM The framework is :Model-View-ViewModel, It looks like this :

 Why do we choose VUE To build the front end

So this MVVM frame , How to understand ? Its first View, It's equivalent to... On the page DOM, the last one Model It's equivalent to a data source , It's like this :

 Why do we choose VUE To build the front end

among ,a The label is DOM,data Objects are data sources , There will never be direct communication between the two , All their connections are through ViewModel, That's what the monitors do . The monitor will be responsible for detecting data changes , Then the data is displayed on the page in real time . for example , hold text The content of is changed to “Hello Vue” Words , that a What's shown in the label , It will automatically become “Hello Vue”. So there's no need for manual operation DOM, All right DOM The operation will be done by the monitor . If you've ever written about complex DOM operation ( Such as **.parent().parent().parent()...), You'll find the convenience of this approach .

Vue It is with this MVVM The frame form of , And through the way of declarative rendering and responsive data binding to help us completely avoid DOM The operation of .

2. Single page application

Single page application (SPA), It is generally referred to as : A page is an application ( Or sub application ). With the development of technology , Now the front-end web page is not limited to display on the browser , mobile phone App On 、 There are more and more opportunities to display on WeChat official account .

So if we put the traditional multi page application form on our mobile phone, what would it look like ? When you jump to open a new page , It's going to be like this :

 Why do we choose VUE To build the front end

All the flowers are gone Is there any ?

And if you use the form of a single page to develop , That would not have happened . Because our entire application has only one page , When our single page is loaded in , No more web requests for pages .Vue With... In the ecosystem Vue-Router Can be very convenient to develop complex single page applications .

3. Lightweight and easy to learn

We know the introduction of JS The larger the volume is. , The longer it takes to load , On the contrary, the smaller the volume , The more time you save . So we're more inclined to use smaller JS file , That's why the introduction of .min Of JS Why . Here is me from Vue A screenshot of the official website :

 Why do we choose VUE To build the front end

With Vue Stable version 2.5.16 For example , You can see from the screenshot Vue The production version of is only 30.90KB Size , Almost no impact on our web loading speed . Also because Vue Just focus on the view layer , A separate Vue It's like a library , So it makes our learning cost very low .

4. Progressive and compatibility

The progressive framework is : I only do what I have to do , And don't ask too much of you .

Vue The core library focuses only on the view layer , Not only easy to get started , It is also easy to integrate with third-party libraries or existing projects .

This is a Vue A sentence on the official website , As said above ,Vue Just the interface , And leave everything else to its surroundings , This requires that Vue You have to have maximum compatibility with other frameworks .

for example , At first, I just want to be a static station , So you can just introduce Vue To build the interface , After a while , You want to add Web access to your website , Then you can introduce axios(Vue The official recommendation ) Or something ( Even if it is jQuery) Network request framework , And then, as your website gets bigger and bigger , You want to turn your site into a big Web When applied , You can introduce something else you need JS file , Such as Loadsh.js、Velocity.js etc. .

5. View componentization

The so-called view componentization is to split our web page into components , It looks like this :

 Why do we choose VUE To build the front end

Vue Allow components to assemble a page , Each component is reusable Vue example , Components can contain their own data , View and code logic . for instance :
 Why do we choose VUE To build the front end

CSDN This profile module of , Everyone is no stranger , When our Web When multiple pages in the application use this profile module , You can encapsulate it as a component , This component has separate code logic 、CSS style 、 Data etc. , Wherever we need to use it , You can go through

<component-name></component-name>

Vue.component('component-name', {
...

});

This way directly introduces .

besides , Many leading companies are also using vue. such as , Are you hungry 、 Nuggets 、 Suning e-buy 、 Meituan 、 Tmall 、Laravel、htmlBurger etc. .

6.Virtual DOM

Virtual DOM It's virtual DOM, You know, browsers handle it DOM In operation , There are performance problems , This is also what we are using jQuery Or native JavaScript Come and go frequently DOM When rendering data , The reason why our page often appears stuck .

And virtual DOM It's through in advance JavaScript All kinds of operations , Put the final need to generate DOM Work it out , And optimize , Only after the calculation is completed will the calculated DOM Put it in our DOM In the tree . Because this way of doing it doesn't actually DOM operation , That's why it's called virtual DOM.

We said before :

Vue By means of declarative rendering and responsive data binding, it helps us to completely avoid the problem of DOM The operation of .

Vue The reason why it can be avoided completely DOM The operation of , Because of Vue It's virtual DOM The way , Not only does it prevent us from dealing with DOM Complex operation of , And greatly speed up the running speed of our application .

7. From community support

Although in the world Vue Our community doesn't have React The community is so prosperous , But benefit from Vue The localization of identity , Plus Vue The power of itself , So there's an extraordinary number of domestic communities , Such as vue-js.com 、vuejs.com.cn etc. . This is not the case with other frameworks , This allows us to learn or use Vue When , You can get more help .
 Why do we choose VUE To build the front end

8.Vue The future of

Vue It's by youyuxi, a native of China Google At work , In order to facilitate their own work and the development of a library , And in the Vue In the process of being used , Suddenly found that more and more people like it . So you Yu River entered a side work 、 While maintaining the State , under these circumstances Vue Still growing rapidly .

Now you Yuxi has officially resigned Google The job of , Start full-time maintenance Vue, At the same time, dozens of excellent developers have joined in , They are committed to putting Vue Make it the most popular front-end framework . The fact proved that Vue It's really getting better and better ( from Angular、React、Vue It can be seen that Vue The momentum ).

therefore , At least vue Don't worry about the future development of , Before disruptive innovation comes out ,vue It's going to get better and better .

primary . Front end little prince

版权声明
本文为[osc_ vpxa23em]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224123751358c.html

Scroll to Top