Reactivity transform and limitations in Vue

Introduction

Reactivity transform helps you write reactive code in Vue more simply by removing the need to write .value all the time. It makes your code cleaner and easier to read.

When you want to write reactive state without using .value everywhere.

When you want to simplify your component code and focus on logic.

When you want to use Vue's Composition API with less boilerplate.

When you want to improve readability in reactive data handling.

When you want to experiment with Vue 3.4+ features for cleaner code.

Syntax

Vue

import { effect } from 'vue'

const count = $ref(0)
const state = $reactive({ name: 'Vue' })

function increment() {
  count++
  state.name = 'Vue.js'
}

Use $ref to create reactive primitive values without .value.

Use $reactive to create reactive objects with direct property access.

Examples

You can update count directly without count.value.

Vue

const count = $ref(0)
count++

Reactive object properties can be read and written directly.

Vue

const state = $reactive({ name: 'Vue' })
state.name = 'Vue 3'

Reactive properties work inside functions without extra syntax.

Vue

function greet() {
  console.log(`Hello, ${state.name}!`)
}

Sample Program

This example shows how $ref and $reactive let you update reactive data directly. The effect logs changes automatically.

Vue

<script setup lang="ts">
import { effect } from 'vue'

const count = $ref(0)
const user = $reactive({ name: 'Alice' })

effect(() => {
  console.log(`Count is ${count}, user is ${user.name}`)
})

function increment() {
  count++
  user.name = 'Bob'
}

increment()
</script>

Important Notes

Reactivity transform requires enabling in Vue 3.4+ with reactivityTransform: true in your config.

Not all Vue APIs support reactivity transform; some advanced cases still need .value.

Using reactivity transform can confuse beginners if mixed with normal refs, so be consistent.

Summary

Reactivity transform lets you write reactive code without .value.

Use $ref for primitives and $reactive for objects.

It simplifies code but has some limitations and requires config enabling.