vue My choice lies in react And angular Between , The grammar of the frame itself is better than react A little more , But more than angular A little less .

It's also because of the different choices , The way of writing and thinking will be different , Good or bad , But it certainly leads to different preferences .

react The simple thing is , The core of it API In fact, very few . So we'll see a lot of places saying react It's actually a UI library , It's not a complete framework . He just tells us how to create components and how to transfer data between components . Even the way to create components is to use ES6 Of class grammar (createClass Will be in react 16 To be discarded ).

So in development react The use of for ES6 The syntax dependence of is very high . because react There isn't much restrictive grammar in itself . We just need to master the props,state,ref, Life cycle , It's like there's not too much extra knowledge . Even if you want to be in jsx Template to traverse the rendering , You have to use the native map Method . and react High level components of , After understanding, I found that , In fact, that is JavaScript The way of thinking involved in functional programming .

So in my opinion ,react The most important feature of the Chinese language is that it is simple and original JavaScript Very close to . That is, there are very few restrictions on developers . The realization of a function , If you know how to use native JavaScript How to achieve , Then you will be able to easily know how to use react How to achieve .

Of course , The core API Simplicity doesn't mean it's easy . At the beginning of use , If you lack experience , Then you use react Written pages , Performance can be very poor . Because the unconscious , Your component may have a lot of extra rendering .

For example, a lot of people are learning react When , You'll get an example of a countdown , This example uses the modify component state The way to achieve . But in fact, later on, you will know , This is a very wrong way . because state Every modification of , Will cause the component and all its subcomponents to re render . It's a very expensive behavior . Of course , I also know a lot of people , In the debug react When , Due to the high frequency of repeated rendering, the browser is directly blocked . These problems are caused by the lack of restrictions that you Yuxi is worried about .

There are people on the Internet who think they are powerful , With the react/vue Such a framework , Actually it says shi Same code , The horror is that they still taunt this and that . And I met someone , I kept saying that I used it angular many years , say angular It's really rubbish , Poor performance , All kinds of black , Result company track by It doesn't work . drink !

and react Because there is no real bi-directional binding . So it's very troublesome to deal with some complex scenes , For example, complex form validation .

And relatively speaking ,vue The ability to provide is a little more , These convenient abilities will make beginners feel very happy , Because a lot of effects can be achieved with simple code . I'd like to list a few abilities that I personally think are great :

  • Unified management of computing properties

JavaScript It's very convenient , Whether it's vue still react, The ability to express is essential . But as vue Official documents say , Putting too much logic in a template makes it too heavy and difficult to maintain . and vue Provides a calculated property to manage expressions in a unified way .


<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div> </template> <script> export default {
name: 'example',
data () {
return {
message: 'Hello'
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
} </script>
  • class It's a great dynamic grammar for me

In practice, we will find many such scenes , An element needs to be determined according to different states class The specific value of . And if it's just a simple expression or conditional judgment in jsx In the template , For example, the following will make people feel very uncomfortable

<p className={active ? 'note active' : 'note'}></p>

When a little more complicated logic is handled in this way, it is unbearable . and vue It's very easy to solve this problem by using the rules supported in .

//  It can be placed anywhere you feel comfortable 
const pcls = {
active: active,
note: true
} <p class={pcls}></p>

So we continue to add more class Names don't cause extra complexity .

Of course , This is just a problem that can be solved by a tool method , In the use of react when , You can use classnames To do the same thing . but vue It's direct support .

  • Two way binding

because react Bidirectional binding is not supported , So it's very painful to implement in complex form validation . and vue While taking one-way data flow as the core , I didn't abandon bi-directional binding completely , This makes development more efficient in such a complex form verification scenario than react It's a lot higher . This is also vue One aspect of saving trouble .

  • Modifier

When we write event handling logic , Often e.preventDefault Wait for the operation .vue The provided modifier function can help us save the code , It's very convenient . If you use too much, you will find that , really TM To use .

<!--  Prevent click events from bubbling  -->
<a v-on:click.stop="doThis"></a>
<!-- Submit event no longer reloads page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- Only modifiers -->
<form v-on:submit.prevent></form>
<!-- Use event capture mode when adding event listeners -->
<div v-on:click.capture="doThis">...</div>
<!-- Only when the event is in the element itself ( Not the sub elements ) Trigger callback when triggered -->
<div v-on:click.self="doThat">...</div>

Of course , There are also key modifiers and so on , You can go to the official website for further study .

vue There are lots of convenient and lovely grammar candy , Don't go into details , You can experience it one by one on the official website . As the article begins ,vue There will be some grammatical restrictions , And these syntactic constraints reduce our development costs to some extent , Improved development efficiency . That's probably why many people think that vue Why it's easier to learn .

In terms of the difficulty of learning ,react It's more difficult to get started , The main reason is not that react In itself , It's about react The rich ecosystem of . It is because of react It's simple enough , So what we need to master react More components . such as react-router,react-redux etc. . And a lot of things that are easy to use , We didn't even know when we didn't have a wide range of functions . For example, I am learning ant-design Source code time , I'm often surprised to find that there is a component here that can be used in this way , It's really great ! And I'm learning vue I'll be surprised to find that , It turns out that such a wonderful component vue Direct support has been given !

So I found out later , original vue And react Since it's so similar .

I still prefer react. But just because react The grammar of is closer to ES6 nothing more

If you have any problems in the learning process or want to obtain learning resources , Welcome to the learning exchange group
343599877, Let's learn the front end together !

react And vue More articles about

  1. React still Vue: Which one should you choose Web The front frame ?

    Learn or learn , It's used a lot , And I'll know more about it , When it's easy to develop . The author also makes a summary : If you like it ( Or hope to be able to use ) Template building application , Please use Vue    If you like simplicity and “ Just use it. ” Things that are ...

  2. Angular React and Vue Comparison

    Angular(1&2),React,Vue contrast One Data flow Data binding Angular Use bidirectional binding, that is : The operation of the interface can reflect the data in real time , Data changes can be displayed to the interface in real time . Realization principle : $scope variable ...

  3. react Build taopiao webapp, And react And vue A simple comparison of .

    Preface Used a while ago vue2.0 Build the taopiao page , And wrote a related article vue2.0 Build taopiao webapp, Got a lot of support from kids' shoes , So these days they use react Refactoring this project , There is no other purpose , Just for learning and common progress ! ...

  4. The front frame :react still vue?

    Before I wrote a summary of the front-end framework , It mainly introduces the current mainstream framework and its characteristics . Except recently bootstrap, Genus react and vue The hottest , This article mainly compares the two frameworks in detail . How to use it correctly ? As Xiaobai, we start from ...

  5. Jerry I'm sorry :SAPUI5, Angular, React and Vue

    When I went to a domestic customer site last year , Once with them IT An architect in the Department talked about SAP On the platform UI The second development of the application ,UI The frame is the choice of UI5 still Vue This topic . We represent SAP, Recommend to customers UI5 It's based on the following six points ...

  6. react VS vue How on earth should we choose ( From the perspective of the project to help you analyze )

    One . preface Now? web Two of the hottest frameworks to develop ,react and vue. It sounds like it's awesome . exactly , Have to take , Create this 2 People who grow frames are really bullshit . But what's more powerful is that 2 People who are constantly improving the framework in our country . A good one idea, It's going to be a long time ...

  7. Technology trends :React vs Vue vs Angular

    React.Vue and Angular How have you been doing in the last two years ?2019 Which technique is best worth learning in 2007 ? the other day Medium An author published a paper on React.Vue and Angular Technology trends article ( ...

  8. Three front-end frameworks (react、vue、angular2+) Summary of parent-child component communication

    The business of the company needs ,react.vue.angular There's contact [\ Helpless face ]. Although it can expand the breadth of knowledge , But it's a headache in depth . Recently, when I was free, I recalled the communication between parent-child components of various frameworks , It's fuzzy , So I did my homework a little bit , Record here ...

  9. sketch react And vue The difference between

    React and Vue These are the two mainstream frameworks ( relatively speaking angular It's less used ) The difference between the two is reflected in the following aspects The same thing : 1.react and vue Both support server-side rendering 2. All have virtual DOM, Component development , adopt prop ...

  10. 【 turn 】 The front-end frame is three points in the world :Angular React and Vue Comparison

    The front-end frame is three points in the world :Angular React and Vue Comparison Link to the original text : Front end technology in recent years ...

Random recommendation

  1. C# Network programming ---TCP Synchronous communication of protocol ( Two )

    Last study diary C# Network programming --TCP agreement ( One ) Since the server has established a connection with the client , Then the communication channel has been opened , Small trains full of data can transmit and receive each other . Now let's look at the data ...

  2. Winform process 、 Threads 、treeview

    process : A program is a process , But there is also a case where a program needs to be supported by multiple processes The class to be used by the process is :Process It's in the namespace :System.Diagnostics; Static methods Start(); You can also instantiate objects , Come on ...

  3. json The sequence specifies the name

    class jsonModel{ public string md5 { get; set; } public object report { get; set; } public string @v ...

  4. linux Some books you need to read in the process of learning

    Entry class Always think , Before learning to develop on a system , First of all, you need to be familiar with the use of this system . In view of China's national conditions , The first operating system most people come into contact with is Windows, So for the vast majority of people , If you want to learn Linux Development , Learn to use this ...

  5. 【Win 10 application development 】UI Composition Notes ( Two ): Basic components

    In the last one , Lao Zhou uses an example , Demonstrates the process of creating a frame view , In this paper , Lao Zhou will tell you about it Composition structure UI Some of “ Spare parts ”. UI Composition There is a core class —— Yes , Namely  C ...

  6. VIP And Switch

    Switch II Maximum connection 12 Road input and 12 Channel output Can't merge data Each input can drive multiple outputs Each output can only be driven by one input When the input is not connected to the output , It can be banned Each prohibited input can be set to stop or consume mode ...

  7. C# The understanding of bit or operation in

    If you know bit operations , See this below 2 The result of a program execution , It will be easy to understand , If a rookie like me , I must feel dizzy at first ,|= What kind of operator is this ? |= Is the bitwise OR operator , Next, I'll explain it with the above program , Why is it up there 2 individual ...

  8. Import log file to mysql Database table

    #!/bin/bash #**************************************************************************** #*** take /usr/ ...

  9. Jmeter( Thirty-six ) Vertical and horizontal concurrency 、 Limit QPS

    One . Vertical and horizontal concurrency Jmeter Design concurrent events , It should be a necessary skill . Let's start with the concept of concurrency . The concept of the number of concurrent users is usually involved in performance testing , About the number of concurrent users ( Number of system users ) I'll remember later . ( About concurrency . Parallel concept reference ...

  10. 【Web】Nginx Rewrite The rules

    Rewrite Introduce Rewrite The main function is to realize URL Rewriting of ,Nginx Of Rewrite Rule adoption Pcre,perl Regular expression compatible syntax rule matching , if necessary Nginx Of Rewrite function , Compiling Ngi ...