Switching From React To Vue.js
So you’re a React developer and you’ve decided to try out Vue.js. Welcome to the party!
React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular’s influence on Vue.
I’ll focus on the differences in this article so you’re ready to jump into Vue and be productive straight away.
Note: this article was originally posted here on the Vue.js Developers blog on 2017/05/29
How much difference is there between React and Vue?
React and Vue have more similarities than differences:
- Both are fast and lightweight
- Both have a component-based architecture
- Both use a virtual DOM
- Both can be dropped into a single HTML file or be a module in a more sophisticated Webpack setup
- Both have separate, but commonly used, router and state management libraries
We’ll break it all down below.
With Vue.js, components are declared with an API method
.component which takes arguments for an
id and a definition object. You’ll probably notice familiar aspects of Vue’s components, and not-so-familiar aspects:
You’ll notice the component has a
template property which is a string of HTML markup. The Vue library includes a compiler which turns a template string into a
render function at runtime. These render functions are used by the virtual DOM.
You can choose not to use a template if you instead want to define your own
renderfunction. You can even use JSX. But switching to Vue just to do that would be kind of like visiting Italy and not eating pizza…
Components in Vue have similar lifecycle methods to React components as well. For example, the
created hook is triggered when the component state is ready, but before the component has been mounted in the page.
One big difference: there’s no equivalent for
shouldComponentUpdate. It’s not needed because of Vue’s reactivity system.
One of Vue’s initialisation steps is to walk through all of the data properties and convert them to getters and setters. If you look below, you can see how the
message data property has a get and set function added to it:
Vue added these getters and setters to enable dependency tracking and change notification when the property is accessed or modified.
To change the state of a component in Vue you don’t need a
setState method, you just go ahead and mutate:
When the value of
message is changed by the mutation, its setter is triggered. The
setmethod will set the new value, but will also carry out a secondary task of informing Vue that a value has changed and any part of the page relying on it may need to be re-rendered.
message is passed as a prop to any child components, Vue knows that they depend on this will be automatically re-rendered as well. That’s why there’s no need for a
shouldComponentUpdate method on Vue components.
Vue is more like Angular with regards to the main template file. As with React, Vue needs to mounted somewhere in the page:
But unlike React, you can continue to add to this main
index.html as it is the template for your root component.
There’s also a way to define your child component templates in the
index.html as well by using HTML features like
inline-template. This is not considered a best practice though as it separates the template from the rest of the component definition.
Again, like Angular, Vue allows you to enhance your templates with logic via “directives”. These are special HTML attributes with the v- prefix, e.g.
v-if for conditional rendering and
v-bind to bind an expression to regular HTML attribute.
Vue doesn’t have an official
create-react-app equivalent though there is the community built
The official recommendation for bootstrapping a project, however, is
vue-cli. It can generate anything from a simple project with one HTML file, to a fully decked-out Webpack + Server-Side Rendering project:
$ vue init template-name project-name
Single HTML file projects
Vue’s creator Evan You dubbed his project a “progressive framework” because it can be scaled up for complex apps, or scaled down for simple apps.
React can do this too, of course. The difference is that Vue projects typically use less ES6 features and rarely use JSX, so there’s usually no need to add Babel. Plus, the Vue library all comes in one file, there’s no separate file for an equivalent of ReactDOM.
Here’s how you add Vue to a single HTML file project:
Note: if you don’t intend to use template strings and therefore don’t need the template compiler, there is a smaller build of Vue that omits this called
vue.runtime.js. It’s about 20KB smaller.
Single file components
If you’re happy to add a build step to your project with a tool like Webpack, you can utilise Vue’s Single File Components (SFCs). These are files which have the
There’s a Webpack loader called
vue-loader which takes care of processing SFCs. In the build process the template is converted to a render function so this is a perfect use cases for the the cut-down
vue.runtime.js build in the browser.
Redux and more
Vue also has a Flux-based state management library called Vuex. Again, it’s similar to Redux, but has a number of differences.
I don’t have time to cover it in this article so I’ll cover it next week’s article. Join my newsletter to get an email update when it’s ready!