Today in the modern world, many JavaScript frameworks having their own reactive engines. Among them Vue’s defined special features is reactive system. The plain JavaScript object changes are tracked and when we modify it, the view gets updated.

In Vue the reactive conversion affects all its nested children properties. Ref and Reactive both provides a way to store object data and allow that object to be reactive. So today we are going to discuss how this two helps and plays major rule in a Vue’s reactive world. Lets take a deep dive!

Ref

It takes an primitives argument and return a reactive mutable object. The object has single property ‘value’ and it will point to the argument taken by it.

const increment = ref(0);
console.log(increment.value) // 0

increment.value++;
console.log(increment.value) // 1

Within Template

when we access ref inside template, it will unwrap the inner value automatically. No need to append .value in the template. Ref should be return as a property of setup hook(render context).

<template>
  <div>{{ state }}</div>
</template>

<script>
import { ref } from 'vue';
  export default {
    setup() {
      return {
        state: ref('Hello World...')
      }
    }
  }
</script>

Within Reactive Object

when we pass ref as a argument to reactive object, it automatically unwraps its inner value. ref unwrapping won’t happens for Array, Map.

const increment = ref(0)
const state = reactive({
  increment
})

console.log(state.increment) // 0

state.increment = 1
console.log(count.increment) // 1

Reactive

It takes a JavaScript object as a argument and returns Proxy based reactive copy of the object.

const state = reactive({
name : 'john',
age  : 21
});

we have to note that, the returned proxy is not same as original object. so in-terms of identity === comparison will be failed.

Reactive within template

<template>
  <div>
    <div> User Name : {{ state.name }}</div>
    <div>Age : {{ state.age }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup() {
    
    const state = reactive({
      name: "john",
      age: 21,
    });
    return {
      state,
    };
  },
};
</script>

Ref vs Reactive

Typically, ref and reactive both have been used to create reactive objects where ref is used to make the primitive values to be reactive (Boolean, Number, String). But reactive won’t work with primitives rather than it works for objects.

Here the problem with reactive is the returned object of setup hook cannot be destructured or spread. To solve this issue Vue introduced toRefs which converts each property on a reactive object into ref object. So we have to remember to use toRefs with reactive when we returning the reactive proxy object from setup hook (composite functions)

Summary

So ref / reactive both are been used to create reactive object where the changes been tracked. The DOM will get updated only when there is a change in reactive objects. This is the fundamental understanding!.