1. Understanding Reactivity in Vue.js

Reactivity in Vue.js allows components to automatically update when their data changes. Vue’s reactivity system ensures that changes to state are reflected in the UI without needing to manually manipulate the DOM.

• Reactive Data: Any data that’s tracked by Vue automatically triggers an update when it changes.
• Reactivity System: Vue creates getter and setter functions for each piece of reactive data, so it knows when to re-render the component.

In Vue 3, reactivity is more flexible thanks to the Composition API, which gives us the ref and reactive functions to create reactive state.

2. Using ref for Reactivity

The ref function is used to create reactive references for primitive values, such as numbers, strings, and booleans.

How to Use ref:

1. Import ref from Vue:

import { ref } from 'vue';

2. import { ref } from 'vue';
Create a Reactive Reference:

To create a reactive reference, use the ref function:

const counter = ref(0); // Creating a reactive reference for a number

• In this case, counter is a reactive reference that will automatically trigger a re-render when its value changes.

• Access and Modify the ref Value:

  To access the value of a ref, use the .value property:

console.log(counter.value); // Access the current value of the ref
counter.value++; // Modify the value

Example: Using ref in a Component:

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const counter = ref(0); // Reactive reference

    const increment = () => {
      counter.value++; // Increment the counter
    };

    return { counter, increment }; // Expose to template
  }
};
</script>

1. • In the Template: You can directly use counter without .value because Vue automatically unwraps the ref in the template.
   • In the Script: You need to use counter.value to access or modify the value.

3. Using reactive for Reactivity with Objects and Arrays

The reactive function is used to create reactive objects or arrays. Unlike ref, which is used for primitive values, reactive works with complex types like objects and arrays.

How to Use reactive:

1. Import reactive from Vue:

import { reactive } from 'vue';

Create a Reactive Object:

To create a reactive object, pass the object to the reactive function:

const state = reactive({
  counter: 0,
  message: 'Hello Vue!'
});

• In this case, state is a reactive object. Any change to its properties will trigger reactivity.

• Access and Modify the Reactive Object:

  You can directly access or modify the properties of a reactive object without the need for .value

1. Example: Using reactive in a Component:

<template>
  <div>
    <p>Counter: {{ state.counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      counter: 0
    });

    const increment = () => {
      state.counter++; // Modify the reactive object directly
    };

    return { state, increment }; // Expose to template
  }
};
</script>

1. • In the Template: You can use state.counter directly, and Vue will automatically react to changes in the state object.
   • In the Script: You can directly mutate the properties of the state object, like state.counter++.

4. Comparison: ref vs reactive

While both ref and reactive enable reactivity, they are used in different contexts:

<template>
  <div>
    <p>{{ state.counter }}</p>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      counter: 0
    });
    const message = ref('Hello Vue!');

    const increment = () => {
      state.counter++;
      message.value = `Counter is now: ${state.counter}`;
    };

    return { state, message, increment };
  }
};
</script>