Vue.js

WARNING

Under construction…

Vue.js is my favorite framework for building modern web applications. I've been working with Vue.js for over eight years and strongly prefer jobs on projects built with Vue.js.

In my opinion, the main advantages of Vue.js over other frameworks are:

• a gentle learning curve
• concise and clean syntax thanks to Single-File Components
• modularity thanks to Composition API
• good performance with a reactivity system that tracks changes
• excellent support for TypeScript

Single-File Components

A unique feature of Vue.js, not present in its main rivals, React and Angular, is the concept of Single-File Components. This idea isn't new; much like a plain old HTML file, a Single-File Component encapsulates HTML, JavaScript, and CSS in one file. This approach encourages to write many small, reusable components that serve as building blocks for larger ones or entire views.

Below I present a small example of Single-File Component for those who are not familiar with Vue.js.

Counter.vue

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  {{ count }}
  <button class="increase" @click="count++">+</button>
</template>

<style scoped>
.increase {
  color: green;
}
</style>

The component renders the current value of the counter and a button that, when clicked, increases the value by 1.

Composition API

Another cool feature introduced in Vue.js version 3 is the Composition API. Previously, components were primarily defined using the Options API, which, conceptually, is similar to classes in object-oriented programming. The Options API is still present in the latest versions of Vue, but it is no longer the recommended approach.

The Composition API gives more control over reactivity. All reactive variables are deeply tracked by default, meaning the reactivity system monitors changes even in nested properties of objects. This approach ensures the code works seamlessly out of the box, but it can affect performance when working with large datasets. Fortunately, the scope of the reactivity system can be limited by replacing ref with shallowRef. By doing so, we instruct the reactivity system to only track changes to the value property, and we take responsibility for ensuring that nested properties are immutable. This is a common scenario when such data comes from a backend and should not be mutated directly.

Below, I have prepared a short comparison between the Options API and the Composition API:

	Options API	Composition API
Component definition	object of options	setup function
Order in component definition	by type	arbitrary
Reusable logic	mixins	composables
Component scope	single scope	closures