If you are trying to figure out which of these two great frameworks to choose, read the Vue proponent's opinion on this issue, which I have translated and supplemented.Translated with support from the Mail.ru Cloud Solutions cloud platform .So, you are a React developer and decided to try Vue. Let's start!React and Vue are both Coca-Cola and Pepsi. Much of what you can do with React can also be done with Vue. At the same time, there are several differences, some of which reflect the impact of the Angular framework on Vue.This article focuses on differences, so you will immediately plunge into the world of Vue and see the benefits.How much do React and Vue differ?
React and Vue have more similarities than differences:- These are two libraries for creating a UI;
- both fast and light;
- have a component-oriented architecture;
- use the Virtual DOM approach;
- both can be connected directly in the HTML file or as a module in a more complex build system on Webpack;
- both have separate but widely used third-party libraries for routing and state management.
Noticeable differences are that Vue typically uses HTML template files, and React only uses JavaScript files. The Vue library also has a mutable state and an automatic template redraw system called reactivity.Components
In the Vue library, components are connected using an API method .componentthat takes id arguments and an object with definition variables. The React developer will probably notice the familiar and unfamiliar aspects of defining Vue components in this code:Vue.component('my-component', {
props: [ 'myprop' ],
data() {
return {
firstName: 'John',
lastName: 'Smith'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
template: `
<div>
<p>Vue components typically have string templates.
<p>Here's some local state: {{ firstName }}
<p>Here's a computed value: {{ fullName }}
<p>Here's a prop passed down from the parent: {{ myprop }}
</div>
`,
created() {
setTimeout(() => {
this.message = 'Goodbye World'
}, 2000);
}
});
Template
As you can see, the component has a property template, which is a string with HTML markup. The Vue library includes a compiler that turns this string into a render function at runtime. These rendering functions use the Virtual DOM engine.You can not use the property templateif instead you decide to create your own rendering function. You can even use JSX markup from the React world. But it would be strange to switch to Vue and do it this way - how to come to Italy and refuse pizza ...Lifecycle hooks
Vue components have life cycle methods similar to those of React components. For example, the hook createdfrom the example above starts when the state ( state) of the component is ready , but before the component attaches to the page. React from the world - getDerivedStateFromProps.But there is one big difference: in the Vue library there is no analogue of the React library shouldComponentUpdate. This is not necessary due to the Vue reactivity system.Component redrawing
One of the steps to initialize a component is to view all its properties and turn them into getters and setters. As you can see, the property messagetaken from the original data ( props) received two additional methods - getand set:Vue attaches these functions to enable dependency tracking and property change notifications when a program reads or changes it.Mutable state
To change state in Vue, you do not need to call a separate method this.setState, as is done in React. You just write the changes directly:
this.setState({ message: 'Hello World' });
this.message = 'Hello World';
When the state value is changed in this way, the method of setthis value is started (see above). Setwrites a new value, but he also has another task: he notifies the library that it is this value that has changed, and that part of the layout, which depends on the value of this variable in the state, may need to be redrawn.If the variable is messagethrown further as property ( prop) into the child components, then the library remembers this, and the child components will also be automatically redrawn. That is why the Vue library does not need a life-cycle method similar to React's shouldComponentUpdate.Main template
Regarding the main project template file, Vue is more like Angular. Like in React, the Vue template needs to be mounted somewhere on the page:<body>
<div id="root"></div>
</body>
ReactDOM.render('...', document.getElementById('root'));
new Vue({
el: '#root'
});
However, unlike React, you can add regular layout to this root element. If React erases everything inside the element when mounting the component #root, then Vue will save:<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
There is also a way to define templates of child components in the root html file via HTML5 extensions such as x-template or inline-template. This is not considered best practice, as it separates the template from the definition of the entire component as a whole.Directives
Again, as in Angular, Vue allows you to expand the capabilities of the component using the logic of "directives". There are special HTML attributes with a prefix v-, for example, v-iffor rendering with conditions or v-bindfor attaching an expression to a regular HTML attribute:new Vue({
el: '#app',
data: {
mybool: true,
myval: 'Hello World'
}
});
<div id="app">
<div v-if="mybool">This renders if mybool is truthy.</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
The value assigned to the directive is a JS expression, so you can then refer to data properties, including using ternary operators, and so on.Project organization
There is no official equivalent to react-create-app in the Vue library, however there is a build made by the Vue developer community: create-vue-app.The official recommendation for starting a project on Vue is vue-cli. It can generate everything from a simple project with one HTML file to a fully packed Webpack + Server-Side Rendering project:$ vue init template-name project-name
Projects with a single HTML file
The creator of Vue.js, Ewan Yu (You Yu Xi), called his project “a progressive framework” because it can be scaled for complex applications or simplified for small applications.Of course, React can do that too. The difference is that Vue projects typically use fewer ES6 features and rarely use JSX, so they don’t need to transpose code using Babel. Plus, the entire Vue library fits in one file, there are no separate files for React equivalents such as ReactDOM.Here's how to add Vue to a project with a single HTML file:<script src="https://unpkg.com/vue/dist/vue.js"></script>
Important! If you are not going to use template strings and, therefore, do not need a template compiler, use a simplified version of the library that does not have these functions - vue.runtime.js. It is approximately 20 KB less than full.Component in one file
If you are fortunate enough to add the build phase of your project using tools such as Webpack, you can use Vue's Single File Components (SFCs, Vue components in a single file). These are files with the extension .vue, they encapsulate the component template, JS configuration and styles in one file:<template>
<div class="my-class">{{ message }}</div>
</template>
<script>
export default {
data() {
message: 'Hello World'
}
}
</script>
<style>
.my-class { font-weight: bold; }
</style>
This, without a doubt, is one of the most remarkable features of the Vue library, because you get the correct HTML template, but the JS logic is right there, right next to it, and you don’t have a separation curve for presentation and logic.There is a Webpack-loader called vue-loader that is responsible for building SFCs. During the assembly process, the template is converted into a rendering function, and this is ideal for using the stripped-down assembly vue.runtime.js in the browser.Redux and the rest
Vue has a Flux-based state management library called Vuex. This time it is similar to Redux, but there are some differences.What does the developer get when switching from React to Vue?
To fully understand the issue, I supplemented the article and told when it is better to choose React, and when to Vue.Switching to Vue is likely to make it easier for new people to enter the project. Vue templates can be written directly in HTML. Also, for small projects, it is not necessary to know the latest ES ++ features and configure code assembly through tools such as Webpack and Babel. The code for Vue can be written in jQuery-style, that is, directly into the template.Vue also has a convenient out-of-box status message delivery system. Developers do not need to bother with calling an asynchronous method setState( as in React ) or connecting external libraries to control state delivery (such as Mobx ).Finally, applications written using Vue can be noticeably lighter: often only the library itself or even its stripped-down version of vue.runtime.js will be needed. While modern development on React is almost impossible without Babel and bulky bundles weighing up to several megabytes.Vue projects, on the other hand, can be too complex if you have a large application or complex logic on the client. If layout is done in an HTML template, it becomes more difficult to test parts of the application. React, which uses only JS code, provides more features for reusing and extending code. Also, if you write in React, you can reuse your code when writing applications for devices using React-Native without much expense. This is not the case with Vue.Therefore, the conclusion may be as follows:Mail.ru Cloud Solutions.