What does readonly do in Vue's reactivity? | Interview Question

Q: What does readonly do in Vue's reactivity?

**Target Audience:** Vue developers who share state between components, stores or composables. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every warning message and value below was printed by running the code on Vue 3.5.44, both as Node scripts against the vue package and as an SFC mounted in jsdom. This page explains **what** readonly does. For **when** to use it next to markRaw and toRaw , see the sibling [When should you use readonly, markRaw, and toRaw in Vue reactivity?](/interview-question/when-should-you-use-readonly-markraw-and-toraw-in-vue-reactivity). ## 1. Why This Even Matters — A Story First A bank shows you your balance through a window. You can look through the glass as often as you like, and whenever the bank updates your balance, the number behind the glass changes immediately. What you cannot do is reach through the glass and change the num

The problem

Question presented to candidate: "A store exposes readonly(state) to components. Explain what readonly actually does: what happens when a component writes to it, does it still update when the store changes, and how is it different from Object.freeze?"

What a strong answer should cover:

readonly() returns a Proxy over the same data that rejects set and delete; it is deep, so nested objects and arrays are read-only too.
It is still reactive for reads: effects reading the view re-run when the owner mutates the original.
In development a blocked write prints Set operation on key "x" failed: target is readonly.; in production the write is silently ignored and does not throw, even in strict mode.
shallowReadonly blocks only top-level writes; component props are shallow read-only.
readonly is not Object.freeze: freeze changes the object itself and stops everyone, readonly is a view that only stops the holder of the view.
Related checks: isReadonly, isReactive, isProxy, toRaw.

Clarifying questions expected:

"Is the goal to protect state from components, or to make data truly immutable?"
"Do you care about development warnings only, or runtime guarantees in production?"

Code / implementation expected: Optional — provide a readonly view to a child and show a blocked write plus an update through the owner.

readonly

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue developers who share state between components, stores or composables. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every warning message and value below was printed by running the code on Vue 3.5.44, both as Node scripts against the vue package and as an SFC mounted in jsdom. This page explains what readonly does. For when to use it next to markRaw and toRaw, see the sibling When should you use readonly, markRaw, and toRaw in Vue reactivity?.

1. Why This Even Matters — A Story First

A bank shows you your balance through a window. You can look through the glass as often as you like, and whenever the bank updates your balance, the number behind the glass changes immediately. What you cannot do is reach t

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueProvide a readonly view: the child can read, not write

Open in playground

<script setup>
import { defineComponent, h, inject, isReadonly, provide, reactive, readonly } from "vue";

// The owner keeps the writable original...
const cart = reactive({ items: [{ name: "Pen", qty: 1 }] });
const addPen = () => cart.items[0].qty++;

// ...and hands out a read-only VIEW of the same data, plus the one sanctioned action.
provide("cart", { state: readonly(cart), addPen });

const CartBadge = defineComponent({
  setup() {
    const { state, addPen } = inject("cart");
    const hack = () => {
      state.items[0].qty = 99; // blocked: warns in dev, silently ignored in prod
      state.items.push({ name: "Free laptop", qty: 1 }); // blocked too: readonly is deep
    };
    return () =>
      h("div", [
        h("p", { id: "badge" }, `child sees: ${state.items.map((i) => i.name + " x" + i.qty).join(", ")}`),
        h("p", `isReadonly(state.items[0]): ${isReadonly(state.items[0])}`),
        h("button", { id: "hack", onClick: hack }, "child tries to write"),
        h("button", { id: "action", onClick: addPen }, "child calls addPen()"),
      ]);
  },
});
</script>

<template>
  <p id="owner">owner sees: {{ cart.items.map((i) => i.name + " x" + i.qty).join(", ") }}</p>
  <CartBadge />
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.