Vue.js for React Developers

 Date: June 13, 2022

It’s been a while since I learned “yet another” JavaScript framework. I recently joined the Super.Events team at Meta and the Super web app is written in Vue.js.

I’ve been working with Knockout, Angular, React and Aurelia in the past. Vue has a lot of similarities with pretty much all of them. It’s like an intersection of Angular and React. This blog post is a short overview of gotchas and differences between Vue and other JS frameworks.

Basics

I’ve been doing development in VSCode, with the Vetur extension. It’s very useful because vue is using Single-File Components. Vue components have .vue extension and following structure:

<template>
<!-- html –>
</template>
<script>
// JS code
</script>
<style>
/ * css styles */
</style>

You can generate a Vue app with Vue CLI. It’s useful for quickly generating app skeletons, and also provides out of box bundling and minification for production.

Key things to learn

  • Vue has props and state (like React)
  • Vue allows to create components and reference them similarly to React
  • ​​Vuex is a store like Redux
  • Vue router is very similar to Angular router
  • Dynamic text uses mustaches syntax: <div>Hello, {{ name }}</div> (almost like React but with double curly braces)
  • There is options API and composition API - the best explanation of differences is in https://vuejs.org/tutorial/ (you can switch code samples between options and composition API) and in Vue JS 3 Tutorial for Beginners (part1, part2)
  • To bind variable to component use v-bind:variable or :variable (example)
  • For two way bindings use v-model (example)
  • For event bindings use v-on or @ (example)
  • You can do conditional rendering with v-if directive (example)
  • Directive for iterating thru list: v-for (example)
  • Other useful things:
    • Computeds - changes when underlying variables change, similar to Knockout ko.computed
    • Refs - allows to reference DOM element and manipulate it directly
    • Watchers - allows to subscribe to variable changes, similar to Knockout subscriptions
    • Emits - you can emit events with this.$emit(‘my event’)

Resources

 Tags:  javascript

Previous
⏪ Skeptics Guide to Universe - Concepts Summary