What are ref and reactive in Vue 3? What is the difference and how is the value accessed?

In Vue 3, ref and reactive are ways to create reactive data, but they differ in usage and structure.

• ref creates a reactive object that contains a single primitive value or object in the .value property. It is used for simple data types (numbers, strings, booleans) or when you need to reactively wrap a single value.

• reactive creates a reactive proxy for an object or array, allowing tracking of changes to all nested properties.

Accessing the value:

• For ref, you need to use .value, for example:

  const count = ref(0);
  console.log(count.value);
  count.value++;
  

• For reactive, you can access properties directly:

  const state = reactive({ count: 0 });
  console.log(state.count);
  state.count++;
  

If you pass a ref inside a Vue template, .value is not needed — the template automatically unwraps the ref.

In short:

• ref is a reactive wrapper for a single value, accessed via .value.
• reactive is a reactive object/array, accessed directly through properties.