What do markRaw and toRaw do? | Interview Question

Q: What do markRaw and toRaw do?

**Target Audience:** Vue developers integrating third-party objects or debugging identity bugs in reactive state. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every value and error message below was printed by running the code on Vue 3.5.44 in Node 22, or by mounting the SFC in jsdom with the repo verifier. This page explains **how** markRaw and toRaw work. For **when** to choose them, alongside readonly , see [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 celebrity hires a body double. The double goes everywhere in public: signs autographs, waves at cameras, and reports back every single thing that happened. Fans never meet the real person, only the double. Most of the time that is perfect. But some places only accept

The problem

Question presented to candidate: "Explain what markRaw and toRaw do in Vue 3. How does each one work internally, and what can go wrong with object identity when proxies and raw objects mix?"

What a strong answer should cover:

Vue's reactive() returns a Proxy, a different object from the original; every nested object read through it is proxied too.
markRaw(obj) sets a hidden, non-enumerable __v_skip flag, so reactive(), ref() and nested access return the object unproxied, forever.
markRaw is shallow: objects nested inside a marked object can still become reactive if reached another way.
toRaw(proxy) returns the original object behind a reactive, readonly or shallow proxy (recursively); writes to it are not tracked.
Identity hazards: proxy !== raw, so Map/WeakMap lookups and === checks can fail; structuredClone(proxy) throws DataCloneError; classes with #private fields break behind a proxy.
Both are escape hatches: use them at boundaries with non-Vue code, not as everyday tools.

Clarifying questions expected:

"Is the object coming from a third-party library, or is it our own state?"
"Do we need the raw object for reading, or are we going to write to it?"

Code / implementation expected: Optional — a class instance that breaks when proxied and works with markRaw, plus toRaw used for a snapshot.

markraw
toraw

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 integrating third-party objects or debugging identity bugs in reactive state. Difficulty: Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every value and error message below was printed by running the code on Vue 3.5.44 in Node 22, or by mounting the SFC in jsdom with the repo verifier. This page explains how markRaw and toRaw work. For when to choose them, alongside readonly, see When should you use readonly, markRaw, and toRaw in Vue reactivity?.

1. Why This Even Matters — A Story First

A celebrity hires a body double. The double goes everywhere in public: signs autographs, waves at cameras, and reports back every single thing that happened. Fans never meet the real person, only the double. Most of the tim

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VuemarkRaw for a class with #private fields, toRaw for structuredClone

Open in playground

<script setup>
import { isReactive, markRaw, reactive, ref, toRaw } from "vue";

// Stand-in for a third-party class (a map, a chart, an SDK client).
// Real libraries often use #private fields, which a Proxy cannot reach.
class Engine {
  #rpm = 0;
  rev() {
    this.#rpm += 1000;
    return this.#rpm;
  }
}

const state = reactive({
  plain: new Engine(),          // becomes a Proxy: breaks #private access
  raw: markRaw(new Engine()),   // opted out: stays the real instance
  form: { title: "Draft", tags: ["vue"] },
});

const result = ref("");
function revBoth() {
  const lines = [];
  for (const key of ["plain", "raw"]) {
    try {
      lines.push(`${key}: rpm ${state[key].rev()} (isReactive ${isReactive(state[key])})`);
    } catch (e) {
      lines.push(`${key}: ${e.constructor.name}: ${e.message}`);
    }
  }
  result.value = lines.join(" | ");
}

const snapshot = ref("");
function save() {
  try {
    structuredClone(state.form); // a Proxy cannot be structured-cloned
  } catch (e) {
    snapshot.value = `proxy: ${e.name}. `;
  }
  // toRaw gives the original object behind the proxy, which clones fine.
  const copy = structuredClone(toRaw(state.form));
  snapshot.value += `toRaw copy: ${JSON.stringify(copy)}`;
}
</script>

<template>
  <button id="rev" @click="revBoth">rev both engines</button>
  <p id="result">{{ result }}</p>
  <button id="save" @click="save">snapshot the form</button>
  <p id="snapshot">{{ snapshot }}</p>
</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.