Let’s start with the most obvious difference: React is a library, while Vue is a framework.
React allows DOM manipulation, component architecture, and state management. All the rest is up to the community. This approach provides a lot of freedom for developers. Many React apps rely on third-party libraries, built and supported by the community, and the choice for the right one can be a challenge for beginners.
Vue , on the other hand, is more interested in and comes with lots of syntax lines, plugin systems, integration directives, transitions, etc. In addition, the development team has created companion libraries for defining Offline and status management along with other useful tools. Some examples of such companion libraries are Vue-routers, Vuex for state management and Vue CLI. Of course, users are not required to use these tools because there are several alternatives. The main benefit is that these are built and supported by the core team. The main focus of Vue, is simplicity and the team has taken care of these common concerns, allowing for faster setup and development. Vue is quickly catching up with React and the community has built a lot of third-party libraries, enriching its ecosystem.
1. Data management
For a web application to be highly interactive, the UI must constantly respond to data changes and this data is called a state . One of the biggest contrasts between React and Vue is the way they handle state changes. This greatly affects the mechanism behind UI updates, also known as re-rendering .
React is known for using Functional Programming (FP). It implements FP principles, such as higher order functions, invariants, pure functions, and so on. The philosophy behind React is that the state is usually immutable data. When trying to change state , the UI will not be re-rendering . To enable re-rendering , the setState method should be used.
In Vue , the state is represented in the data object. Unlike React, changing data objects will trigger UI re-rendering .
2. Template && Styling
Vue takes a more cautious approach to template & styling – separately from logic. The markup is shown as templates that look like HTML. In fact, every valid HTML is also a valid Vue template. Inside the template , Vue provides a lot of syntax lines like conditionals, iterations, etc.
Extending the Vue or React application with third-party libraries is quite simple. Most vendor libraries for React are simply components that enhance existing ones. For example, the React-Redux library is using the context API and displaying a higher-level component that makes the state accessible from all selected components. In Vue , many third party libraries are in plugin form, taking advantage of the integrated plugin system. Plugins can be added using the Vue.use method.
Above is the similarity and basic differences between React and Vue. If there is anything missing in the article, hope everyone can give me more ideas.
Article translated from https://mentormate.com/blog/react-vs-vue-the-core-differences/