shallowReadonly() Shallow Readonly Proxy
Last updated: 2026-10-22
shallowReadonly() Shallow Readonly Proxy
shallowReadonly() makes only the first level readonly; nested objects remain writable.
| Group | Reactivity: Advanced |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const cfg = shallowReadonly({ theme: 'dark', nested: {} })
cfg.theme = 'light' // ❌ blocked
cfg.nested.x = 1 // ✅ allowed⚙️ Arguments
| target | An object |
|---|
Returns：A shallow readonly proxy
▶ Example
Edit the code below and see the live result:
Output：
The top-level write is blocked with a warning; the nested write goes through.💡 Key Points
⚠️ Warning Shallow readonly is not protection — nested data stays writable.
ℹ️ Note Rare niche: constant top-level keys with mutable nested references.
🏷️ Related Advanced
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from readonly?
A One level only; readonly locks the entire tree.
Q Typical use?
A Rare — mostly internal APIs needing shallow guarding at low cost.
Q Can it be detected?
A isReadonly and isProxy both return true.
