DEV Community

The Practical Developer
The Practical Developer

Posted on Originally published at practicaldevblog.blogspot.com

Vue.js Explained: Reactivity Without the Boilerplate

#vue #javascript #beginners #webdev

Introduction

Vue.js is a front-end framework for building interactive web pages — the same job as React, with a gentler learning curve. Its core promise is reactivity: change your data, and the page updates itself, without you touching the DOM by hand.

If you know basic HTML and JavaScript, you can build something real in Vue within an afternoon.

Your first reactive value

Vue's ref wraps a value so Vue can watch it. Change the value, and anything displaying it updates automatically.

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>
Enter fullscreen mode Exit fullscreen mode

Two things to notice. First, count.value in the script, but just count in the template — Vue unwraps refs in templates for you. Second, @click is Vue's shorthand for listening to a click event. No document.querySelector, no manual text updates: the button label follows the data.

Computed values: derived data, done right

Often you need a value derived from other values — a full name from a first and last name, or a total from a list of prices. A computed value recalculates automatically when its inputs change, and caches the result until then.

import { ref, computed } from 'vue'

const price = ref(20)
const quantity = ref(3)

const total = computed(() => price.value * quantity.value)
// total is 60; change price or quantity, and total follows
Enter fullscreen mode Exit fullscreen mode

The alternative — recalculating by hand every time something changes — is exactly the kind of bookkeeping that causes bugs. Computed values remove it.

Directives: HTML with superpowers

Vue extends HTML with directives, special attributes starting with v-:

  • v-if — show an element only when a condition is true.
  • v-for — repeat an element for each item in a list.
  • v-model — two-way binding: an input and a variable stay in sync automatically. 
<input v-model="name" placeholder="Your name" />
<p v-if="name">Hello, {{ name }}!</p>

<ul>
  <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Type in the input, and the greeting appears without any event-handler code. That is reactivity doing the work you used to do manually.

Vue vs React, honestly

Both build interactive interfaces, and both are good choices. The practical differences:

  • Learning curve: Vue's template syntax reads like HTML, so beginners usually get productive faster.
  • Setup: Vue's official tooling works out of the box with little configuration; React often needs more decisions up front.
  • Ecosystem: React's is larger, which matters for very specialised needs; Vue's covers the common cases well.

Choosing Vue is not choosing a lesser framework — it is choosing the one whose trade-offs fit smaller teams and faster starts.

Takeaway

Wrap data in ref, derive values with computed, and let directives connect data to the page. Change the data, and Vue handles the rest — that single idea is most of what makes Vue feel easy.

Originally published at https://practicaldevblog.blogspot.com/2026/10/vuejs-explained-reactivity-without.html

Top comments (0)