Reactivity

Studio writes this format for you. The Data panel and the Inspector's Logic tab ( Logic ) generate everything below. This page documents the model if you want to hand-edit or understand it.

Template literal syntax is valid anywhere a string value appears in the document tree, not only inside state . Wherever you write one, the value recomputes when the state it reads changes. All reactivity is powered by @vue/reactivity .

A template resolves state.propertyName against the current component's reactive proxy, plus the iteration bindings ( $map , item , index ) where an Array map provides them.

Reactive element properties

{
  "tagName": "div",
  "textContent": "undefined items remaining",
  "className": "card",
  "hidden": 
}

Reactive style properties

{
  "tagName": "div",
  "style": {
    "color": "inherit",
    "opacity": "1"
  }
}

Reactive attributes

{
  "tagName": "button",
  "attributes": {
    "aria-label": "undefined unread messages",
    "data-state": "undefined"
  }
}

How it works

When the compiler encounters in any string-valued property, it wraps the binding in a reactive effect:

watchEffect(() => {
  el.textContent = state.count} items remaining`;
});

Dependencies are tracked automatically by Vue when state.* properties are read.

Choosing between $ref and a template string

Prefer for a single-use reactive binding, and $ref for a signal that is named and reused.

Computed state

Template strings in state become computed() values:

{
  "state": {
    "firstName": "Jane",
    "lastName": "Doe",
    "fullName": "undefined undefined"
  }
}

Reading and writing state from JavaScript

Within body strings and external .js files, read and write state directly:

// Read
const current = state.count;

// Write
state.count = current + 1;

// Mutate array (Vue tracks mutations)
state.items.push(newItem);

// Mutate nested object
state.user.name = "Alice";

There are no .get() or .set() calls and no this . All component state is reached through state .

Prototypes for web APIs

Built-in prototypes for common web APIs:

Timing

Related

• State declares the signals a template reads.

• Expressions covers what may appear inside .

• Timing covers when each value resolves.