# Using Reactivity in Vue 3

In Vue 3, the reactivity system has been enhanced with the Composition API, providing more flexibility and control which keeps your UI in sync with your data. It allows developers to declaratively define relationships between data and the UI declaratively, ensuring that changes in data are automatically reflected in the UI and vice versa which removes the burden of manually managing UI updates based on data changes.

### **Ref() and Reactive():**

In Vue 3, you can create reactive data structures using `ref()` for the primitive values and `reactive()` for the objects.

**Ref()** is calling `reactive()` behind the scenes since, `reactive()` works for objects and `ref()` calls `reactive()`, objects work for both but, `ref()` has a `.value` property for reassigning. Use `ref()` when it's a primitive (for example 'string', true, 23, etc). When you write `ref([])` it is equivalent to `ref(reactive([]))`. Any object (including an array) passed to `ref` will be passed to `reactive` internally.

**Reactive()** does not have `.value` and therefore cannot be reassigned. it only takes objects, not JS primitives (String, Boolean, Number, BigInt, Symbol, null, undefined). Use `reactive()` when it's an object you don't need to reassign, and you want to avoid the overhead of `ref()` .

In Summary, `ref()` seems like the way to go since it supports all object types and allows reassigning with `.value`. `ref()` is a good place to start, but as you get used to the API,you will know that `reactive()` has less overhead, and you may find it better meets your needs.

```javascript
<script setup>

    import { ref, reactivity } from vue
    
    // ref
    const counter = ref(0);
    //reactive
    const users = reactive([
      { name: "user1", age: 20 },
      { name: "user2", age: 30 },
    ]);

</script>
```

> *While* `ref()` is suitable for primitive values, `reactive()` is ideal for complex objects, offering a comprehensive reactivity setup.

### **Computed properties**

Computed properties are another cornerstone of reactivity in Vue.js 3. They act like derived data, calculated based on other reactive values. Whenever the data they depend on changes, computed properties automatically re-evaluate and update their values, ensuring your UI always displays the latest information.

```javascript
<script setup>
    import { ref, computed } from 'vue'

    const firstName = ref('john')
    const lastName = ref('cena')
    
    const fullname = computed(() => `${firstName.value} + ${lastName.value}`)
</script>
```

### **Watchers**

Watchers allow you to observe changes in reactive properties and execute custom logic when those properties change. This mechanism is particularly useful when you need to perform specific actions in response to changes in your data.

```javascript
<script setup>
    import { reactive, watch } from 'vue'

    const obj = reactive({ count: 0 })
    
    watch(
      () => obj.count,
      (newValue) => {
        console.log(`count is: ${newValue}`)
      }
    )
</script>
```

### **Unveiling the Magic Behind Vue.js 3 Reactivity**

The reactivity system of Vue.js 3 is responsible for the dynamic nature of your application. It operates silently in the background to ensure that changes in your data are accurately reflected in the user interface, keeping everything in sync and providing an interactive user experience. However, have you ever wondered how this magic happens?

Vue uses JavaScript Proxies to create an intelligent observation layer around your data. These Proxies work as silent guards, intercepting all interactions with your reactive data, which are objects or values wrapped with. Whenever a change occurs, such as adding a property, modifying an existing one, or deleting something entirely, the Proxies immediately act to handle it.

The update process unfolds in a series of well-coordinated steps:

1. **Proxy Detects Change:** The Proxy observes a modification in your reactive data.
    
2. **Dependency Collection:** The Proxy meticulously identifies all parts of your application that depend on the changed data. This includes template expressions referencing the data and computed properties deriving their values from it.
    
3. **Scheduler Steps:** To optimize performance, Vue employs a scheduler. It groups multiple changes together and triggers a single update cycle, preventing unnecessary re-renders, especially during rapid data manipulation.
    
4. **UI Re-renders:** Finally, Vue utilizes the collected dependency information to efficiently update the DOM with the new data, ensuring your UI reflects the latest information.
    

Let's see this in action with a simple code example:

```javascript
<script setup>
  import { ref } from vue    
  const count = ref(0);

  const increment = () => {
    count.value++;
  }
</script>

<template>
  <div>
    <p>You clicked {{ count }} times</p>
    <button @click="increment">Click me!</button>
  </div>
</template>
```

Here, `count` is wrapped in, making it reactive. Clicking the button triggers the `increment` function, which increases `count.value`. The Proxy watching `count` detects this change. It then identifies the template expression `{{ count }}` as depending on `count`. Vue batches the change, updates the DOM, and the displayed count reflects the new value.

### **Conclusion**

Reactivity is a fundamental concept in Vue 3 that enables seamless synchronization between data and the UI. You can build powerful and dynamic Vue applications by understanding the reactivity model, working with reactive data, and utilizing computed properties. However, it’s important to know the reactivity caveats and follow best practices to ensure optimal reactivity and performance.

Thanks..

### References

[https://vuejs.org/guide/essentials/reactivity-fundamentals.html](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)

[https://vuejs.org/guide/extras/reactivity-in-depth.html](https://vuejs.org/guide/extras/reactivity-in-depth.html)

[https://kaperskyguru.medium.com/ultimate-guide-to-vue-3-reactivity-95a68e8704fd](https://kaperskyguru.medium.com/ultimate-guide-to-vue-3-reactivity-95a68e8704fd)

[https://github.com/vuejs/docs/issues/801#issuecomment-757587022](https://github.com/vuejs/docs/issues/801#issuecomment-757587022)