What is the difference between react and vue?

The choice of vue is between react and angular. The framework itself has a little more syntax than react, but a little less than angular.

It is precisely because of the different choices that the writing and thinking methods presented will definitely be different, regardless of whether they are good or bad, but they will definitely lead to different preferences.

The simplicity of react is that its core API is actually very small. So we will see many places saying that react is actually a UI library, 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's class syntax (createClass will be discarded in react 16).

Therefore, the use of react in development relies very heavily on the syntax of ES6. Because react itself does not have much restrictive syntax. We only need to master the props, state, ref, and life cycle in the component. It seems that there is not much additional knowledge. Even if you want to traverse rendering in jsx template, you have to use the native map method. As for the high-order components of react, after understanding it, I found that it is actually the way of thinking involved in JavaScript functional programming.

So in my opinion, the biggest feature of react is that it is simple and very close to native JavaScript. That means there are very few constraints on developers. To implement a function, if you know how to implement it using native JavaScript, then you will be able to easily know how to implement it using react.

Of course, the simplicity of the core API does not mean that it is easy to get started. At the beginning of use, if you lack experience, the performance of the pages you write using react may be very poor. Because unintentionally, your component may have a lot of redundant rendering.

For example, when many people are learning react, they will come across a countdown example. This example is implemented by modifying the state in the component. But in fact, everyone will gradually realize that this approach is very wrong. Because every modification of state will cause the component and all its subcomponents to be re-rendered. This is very costly behavior. Of course, I also know that many people, when debugging react, directly freeze the browser due to high-frequency repeated rendering. These problems are caused by too few restrictions that You Yuxi is worried about.

Some people on the Internet who think they are awesome use frameworks like react/vue, but actually write the same code. The scary thing is that they still ridicule this and that. I also met a person who kept saying that he had been using Angular for many years. He said that Angular was really rubbish, its performance was so bad, and all kinds of bad stuff. In the end, he couldn’t even use track by. drink!

And react has no real two-way binding. Therefore, it will be very troublesome to deal with some complex scenarios, such as complex form validation.

Relatively speaking, vue provides more capabilities. These convenient capabilities will make beginners feel very happy, because many effects can be achieved with only some simple codes. I will probably list a few capabilities that I personally think are great:

• Uniformly managed calculated properties

JavaScript expressions are very convenient, regardless of Whether it is Vue or React, the ability to express is essential. But as the Vue official documentation says, putting too much logic in the template will make the template overweight and difficult to maintain. The Vue component provides a calculated property to uniformly manage expressions.

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: &#39;example&#39;,
    data () {return {message: &#39;Hello&#39;
        }
    },computed: {reversedMessage: function() {return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
        }
    }
}</script>

• The dynamic syntax of class makes me feel very happy

In practice we will find many such scenarios, which need to be based on different The state determines the specific value of an element class. And if there are only simple expressions or conditional judgments in the jsx template, such as the following, it will make people feel very uncomfortable

<p className={active ? &#39;note active&#39; : &#39;note&#39;}></p>

When slightly more complex logic is handled like this, it will be unbearable. The syntax supported in vue solves this problem very easily.

// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

In this way, if we continue to add more class names, it will not cause additional complexity.

Of course, this is just a problem that can be solved with a tool method. When using react, you can use classnames to complete the same function. But vue directly supports it.

• Two-way binding

Since react does not support two-way binding, it is very painful to implement complex form validation. . While Vue takes one-way data flow as its core, it does not completely abandon two-way binding, which makes the development efficiency in such complex form verification scenarios much higher than that of React. This is also an aspect of vue that saves trouble.

• Modifier

When we write event processing logic, we often need e.preventDefault and other operations. The modifier function provided by vue can help us save these codes, which is extremely convenient. The more you use it, the more you'll find it's really easy to use.

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>

Of course, there are also key modifiers, etc. You can go to the official website to learn more.

Vue provides many convenient and lovely syntactic sugars, so I won’t go into details. You can experience them one by one on the official website. As mentioned at the beginning of the article, Vue will have some grammatical restrictions, and these grammatical restrictions reduce our development costs and improve development efficiency to some extent. This is probably why many people think vue is simpler and easier to learn.

In terms of ease of learning, the main reason why react is more difficult to get started is not because of react itself, but because of the rich ecosystem surrounding react. Precisely because react itself is simple enough, we need to master more react components. Such as react-router, react-redux, etc. And there are many useful components with great functions that we didn’t even know about when we didn’t know much about them. For example, when I study the source code of ant-design, I am often surprised to find that there is a component here that can be used in this way. It’s really great! And when I was learning Vue, I was surprised to find that Vue already supports such great components!

So later I discovered that vue and react are so similar.

I still prefer react. But just because the syntax of react is closer to ES6

The above is the detailed content of What is the difference between react and vue?. For more information, please follow other related articles on the PHP Chinese website!