readonly() Create a Readonly Proxy
Last updated: 2026-10-22
readonly() Create a Readonly Proxy
readonly() creates a readonly proxy of the source: writes warn and fail, protecting data from accidental mutation.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const config = readonly({ theme: 'dark' })
config.theme = 'light' // ❌ warns: write operation failed⚙️ Arguments
| target | An object or a ref (a readonly ref is returned for refs) |
|---|
Returns：A deep readonly proxy
▶ Example
Edit the code below and see the live result:
Output：
Theme stays dark; clicking logs a failed-write warning and nothing changes.💡 Key Points
💡 Tip Typical use: wrap config passed to children so they cannot mutate the parent's data.
ℹ️ Note The direction is one-way: source changes propagate in, writes are blocked.
⚠️ Warning Warnings appear in dev and writes fail silently in production — do not use it as runtime validation.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does readonly prevent every mutation?
A It traps writes through the proxy; mutating the original directly still works, so it is not immutability.
Q Does a readonly proxy still update?
A Yes — source changes propagate through; only writes are blocked.
Q How is it different from Object.freeze?
A freeze mutates the real object irreversibly; readonly is a proxy layer that keeps reactivity.
