Vue Reactivity (Part 2): shallowRef, markRaw, and When to Skip Deep

Vue's reactivity system is powerful, but turning every nested property into a reactive proxy has a cost. For large objects, third-party instances, or data that rarely changes, you can avoid that cost with shallowRef, markRaw, and a few simple rules. This post explains when and how to use them.

Why deep reactivity can hurt

By default, ref() and reactive() make the whole object (and nested objects) reactive. Vue does this by wrapping values in Proxy and tracking property access. That gives you fine-grained updates when any nested field changes—but it also means: