Handling Reactive Data Using ref in Vue.js

In Vue 3 is the ref is the function that is the part of the Composition API and is designed to handle reactive data in a straightforward and efficient manner.

What is ref?

• The ref function creates a reactive reference to a value. When the value of a ref changes, Vue re-renders the component using it, ensuring that your UI stays in sync with your data.
• A ref can hold any type of data, whether it’s a primitive, an object, or even a complex data structure.

Using ref for Reactive Data

1. To use ref, you first need to import it from Vue.
2. Then, you can create a reactive reference by calling ref with an initial value.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}

Thank You.