ref in Vue

I have updated the content of this article here

Added new functionality to src/components/HelloWorld.vue

ref is a function that makes a piece of data reactive. This means when the data changes, Vue automatically updates the part of your website where that data is displayed. Think of ref like magic glue that connects your data to your website's appearance. Whenever the data changes, the website's look updates by itself without any extra work from you.

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

defineProps({
  msg: String,
});

const count = ref(0);
const isProcessing = ref(false);

const incrementCount = () => {
  isProcessing.value = true;
  fetch(`/increment/${count.value}`)
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        console.error(`${response.status} ${response.statusText}`);
        isProcessing.value = false;
      }
    })
    .then((val) => {
      count.value = parseInt(val);
      isProcessing.value = false;
    })
    .catch((error) => {
      console.error(`Error: ${error.message}`);
      isProcessing.value = false;
    });
};
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" :disabled="isProcessing" @click="incrementCount">
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

const count = ref(0);
const isProcessing = ref(false);

const count = ref(0);

This line creates a reactive piece of data named count and starts it off at 0. Imagine count as a scoreboard on a game. Whenever count changes, the scoreboard on your website updates to show the new score.

const isProcessing = ref(false);

This creates another reactive piece of data called isProcessing and sets it to false initially. You can think of isProcessing as a traffic light that controls when you can press the button. When isProcessing is true (the light is red), you cannot press the button. When it's false (the light turns green), you can press it again.

:disabled="isProcessing":
This binds the disabled attribute of the button to the isProcessing reactive reference. When isProcessing is true, the button becomes disabled, preventing users from clicking it again until the current process completes. This is a common pattern to prevent duplicate requests or actions while an asynchronous operation is in progress.

isProcessing.value = true;
This disables the button by setting isProcessing to true.