Reactivity transform and limitations in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Reactivity Transform in Vue?

Reactivity Transform is a feature in Vue that lets you write reactive code without calling ref() or reactive() explicitly. It uses special syntax to automatically track changes.

beginner

How do you declare a reactive variable using Reactivity Transform?

You declare a reactive variable using <code>$ref(value)</code> inside <code>&lt;script setup&gt;</code>. For example, <code>const count = $ref(0)</code> makes <code>count</code> a reactive ref without calling <code>ref()</code>.

intermediate

Name one limitation of Reactivity Transform.

One limitation is that Reactivity Transform only works inside <script setup> blocks. It does not work in normal <script> or outside Vue components.

intermediate

Why might Reactivity Transform cause confusion for beginners?

Because it hides the usual ref() and reactive() calls, beginners might not understand how reactivity works under the hood or when to use it properly.

beginner

Can Reactivity Transform be used with Vue 2?

No, Reactivity Transform is a feature introduced in Vue 3.4+ and requires the Composition API and <script setup> syntax, which Vue 2 does not support.

Where can Reactivity Transform be used in Vue?

A In CSS files

B Anywhere in JavaScript files

C Inside <script setup> blocks

D Only in Vue 2 components

Reactivity Transform works only inside <script setup> blocks in Vue 3.4+.

What symbol is used to declare reactive variables with Reactivity Transform?

A $

B #

C @

D &

Reactive variables are declared using $ref(), which starts with the $ symbol.

Which Vue version introduced Reactivity Transform?

A Vue 1.0

B Vue 2.6

C Vue 3.0

D Vue 3.4+

Reactivity Transform was introduced in Vue 3.4 and later versions.

What is a common beginner confusion with Reactivity Transform?

A Not understanding hidden ref() calls

B Using it in CSS

C It works without Vue

D It disables reactivity

Beginners may not realize Reactivity Transform hides the usual ref() calls, making reactivity less clear.

Can Reactivity Transform be used outside Vue components?

A Yes, anywhere in JavaScript

B No, only inside <script setup>

C Only in Vue 2

D Only in templates

Reactivity Transform only works inside <script setup> blocks of Vue components.

Explain what Reactivity Transform is and how it changes writing reactive code in Vue.

Think about how it simplifies reactive variable declarations.

Describe at least two limitations or challenges when using Reactivity Transform.

Consider where and when you can use it and what learners might find tricky.