DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Playwright JavaScript Tutorial: A Complete Guide
  • The SPACE Framework for Developer Productivity
  • Auditing Tools for Kubernetes
  • Redefining DevOps: The Transformative Power of Containerization
  1. DZone
  2. Coding
  3. JavaScript
  4. Make Your Web App Reactive With Vue Reactivity

Make Your Web App Reactive With Vue Reactivity

Tomasz Waraksa user avatar by
Tomasz Waraksa
CORE ·
Jul. 06, 20 · Tutorial
Like (2)
Save
Tweet
Share
3.22K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

During recent years, I've been working more and more with Vue.js. It's a pleasure to work with it, compared to other frameworks. To be clear, it is a large and feature rich framework as well, but somehow it feels much lighter and easier to digest (pun intended ;-) than its rivals.

While studying the upcoming Vue.js v3 release, I have noticed that it has become highly modular. Particularly, the most essential feature of Vue.js, which is its reactivity system, is now available as a standalone module. Turns out that to use it, one actually does not need all of Vue.js!

Vue.js Reactivity in a Pill

In essence, Vue.js reactivity allows individuals to run code automatically in response to mutations of data. How is it useful? Well, it's running every Vue component. Take this barebones Vue component, where the click of a button changes the welcome message:

Vue.js Component
 




x
10


 
1
<template>
2
  <div>
3
    <button @click="this.message='Welcome, traveller!'">
4
      Click me
5
    </button>
6
    <label>
7
      {{ message }}
8
    </label>
9
  </div>
10
</template>
11

          



Its Vue reactivity system that detects that message data property has changed when I clicked the button. It will render the label accordingly. 

Notice that Vue's reactivity system does not care about mouse clicks. It could be any other event — a timer or an asynchronous web call. It reacts because a reactive message property has changed, whatever the reason. In response to that change, it will render a <label> element because it depends on the message property. If there were any other elements referring to message, they would all be rendered as well.

It Works Outside Vue Components Just as Well

It turns out that with Vue.js 3, reactivity can be used outside Vue components. Here's a simple example:

HTML
 




x


 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>Vue Reactivity Without Vue</title>
6
  <script src="https://cdn.jsdelivr.net/npm/@vue/reactivity@3.0.0-beta.15/dist/reactivity.global.min.js"></script>
7
  <script type="module" src="index.js"></script>
8
</head>
9

          
10
<body>
11
  <button id="btn">Click me</button>
12
  <div id="counter">0 clicks</div>
13
</body>
14

          
15
</html>
16

          



and the accompanying script:

JavaScript
 




x


 
1
const { reactive, computed, effect } = window.VueReactivity
2
3
4
const state = reactive({
5
  counter: 0,
6
  label: computed(() => 
7
    `${state.counter} click${state.counter === 1 ? '' : 's'}`)
8
})
9
10
11
effect(() => {
12
  const counter = document.querySelector('#counter')
13
  counter.innerHTML = state.label
14
})
15
16
17
window.addEventListener('load', () => {
18
  const button = document.querySelector('#btn')
19
  button.addEventListener('click', () => {
20
    state.counter++
21
  })
22
})
23



It runs without babel, webpack, TypeScript, CLI tools, without anything we take for granted as a necessary evil these days. All it needs to run is a decent browser.

In the example, we have a label displaying a number of clicks of a button. 

We've introduced a simple state object containing a counter. The state is made reactive with the helper function from Vue Reactivity module.

State also has a computed property that returns a human-friendly label. Just to remind, unlike object getters which are evaluated each time they're called, a computed property is smarter — it's evaluated only when values it uses are changed. 

Whenever the button is clicked, counter in the state is increased and label is updated. This is all done by Vue reactivity. The code which assigns new HTML content to the #counter element is wrapped in an effect() wrapper. This tells the reactivity system to observe if any of the reactive objects used in this code have changed.  

When I click a button, state.counter is increased. Because state.counter is reactive, Vue reactivity system calls all effects that depend on it. This means that our #counter element will be refreshed immediately.

Why Would I Want to Use It?

The main reason for introducing frameworks like Vue, React, or Angular is their support for state management and automatic synchronization of that state with UI representing it. 

In some cases, that's just too much. Introducing a framework comes with a price — a complex build pipeline, CLI tools, plenty of assumptions, and conventions and requirements to follow. In many simple scenarios, one just does not need all that. But one still needs simple state management, and would benefit from declarative way of defining the UI and automatic propagation of state changes to UI.

This all can be done with the minimalistic Vue.js reactivity system. The library itself is a mere 4.5kB, so it doesn't add any significant burden. Yet, it allows you to build small web pages and mini-applications using the same paradigms as their bigger peers:

  • Application state, clearly defined and separated from UI.
  • Declarative UI where we can specify recipes to render elements using application state, and that's all we care about.

Reactivity system takes care of watching changes in state and re-rendering my UI elements whenever necessary. I no longer have to call code updating all the bits and pieces in the UI. I no longer worry whether I called them in a right order or whether I have forgotten about some of them, leaving my UI in an inconsistent state.

All in all, it helps us create even the smallest web applications in a safe and robust way, having the same quality and stability as large web applications using big frameworks.

References

JSFiddle with the example code can be seen here: https://jsfiddle.net/letsdebugit/ybtrwLn2/4/

You can learn more about how Vue.js reactivity works in the following in-depth articles:

https://vuejs.org/v2/guide/reactivity.html

https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/

The latest version of @vue/reactivity library can be found at https://www.builtforvue.com/@vue/reactivity and https://github.com/vuejs/vue-next/tree/master/packages/reactivity 

All credits go to Vue.js creators, thank you for your awesome work!

Vue.js app

Opinions expressed by DZone contributors are their own.

Trending

  • Playwright JavaScript Tutorial: A Complete Guide
  • The SPACE Framework for Developer Productivity
  • Auditing Tools for Kubernetes
  • Redefining DevOps: The Transformative Power of Containerization

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: