The differences between Vue.js with React.js from a new Passionate Vue-r and long-time React-holic.
In the world of front end web development, new frameworks pop out quickly than the new Lay’s chip flavours (not factual). I learned React.js when I was in bootcamp and once I have the freedom to pick up something else, I found myself in the land of Vue.js. I decided to compile the following list of things I learned that differentiate Vue.js from React.js during my very first month with the framework.
That moustache {{ }} for your templates
Vue.js leverages the lovely lovely Handlebar.js templates for easy-to-read templates. Under the hood, Vue.js creates a template based on the HTML code, stores that internally and uses that to create the real HTML code, which is then rendered to the DOM.
<h1> {{ title }} </h1>Learn more about interpolation with Vue.js here.
A built-in calculator 🧮 to compute and cache your properties
I believe the one of the greatest gifts the Vue team gives us developers is the computed properties. These are little things that are cached based on their reactive property dependencies. In other words, Vue actively observes for changes on these dependencies and would only execute the code inside your computed when there is a change.
computed: {
now: () {
return Date.now()
}
}
Learn more about computed properties with Vue.js here.
All about da conditionals
v-if/v-else and v-show are great tools to conditionally render in Vue.js. The difference is that the former attaches and detaches the elements from the DOM so it’s better to use the latter it’s known that elements would be conditionally render quite frequently. v-show leverages the CSS property display: none.
Learn more about conditional rendering with Vue.js here.
Looping 🔁
Vue.js provides a very sweet syntax for looping through arrays and objects. Just like React, it is recommended to attach a unique key for each item so the Vue interpreter can keep track of the item to avoid potential issues.
<ul>
<li
v-for="animal in animals">
{{ animal }}
</li>
</ul>Learn more about list rendering with Vue.js here.
.Vue file, the one with everything
Vue.js introduces the idea of single file components: Each .Vue file is made up with three parts: <template> ( to hold all the HTML code), <style> (to hold all styling code) and <script> (to hold all the Javascript logistics). This gives developers a really good view of everything that is going on with that component within the same file and thus makes the code more cohesive and maintainable. It also comes with pre-processors, such as Pug, Babel and everyone’s fav, SCSS.
Learn more about single file components with Vue.js here.
Credits: Examples from this post are largely inspired by the Vue.js docs. The lovely team at Vue.js also had their inputs on the matter. Head over here to learn more about their comparison of Vue and other frameworks. I have been following the lovely tutorials of Maximilian Schwarzmüller on udemy and I highly recommend this course if you are starting your journey for Vue.js.
Here are some other places you can find me on the Internet:
I coded a website for myself.
I write at-the-moment short blog post (people also call them tweets): https://twitter.com/ChaoyueZ
Wanted to know about my career journey? Head over: https://www.linkedin.com/in/chaoyuezhao/
And of course, you want to know what food I eat: https://www.instagram.com/chaoyue_zhao/?hl=en
