Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import {
  shallowRef, shallowReactive, readonly,
  markRaw, triggerRef, isRef, isReactive
} from 'vue';

// ── shallowRef: only .value change is tracked ─
const bigList = shallowRef([/* thousands of rows */]);
// Mutate inner array then manually trigger
bigList.value.push({ id: 999, name: 'New' });
triggerRef(bigList);            // force update

// ── shallowReactive: top-level props only ─────
const state = shallowReactive({ count: 0, nested: { deep: 1 } });
state.count++;                  // tracked ✓
state.nested.deep++;            // NOT tracked ✗

// ── readonly: prevent mutations ───────────────
const immutable = readonly({ token: 'abc123' });
// immutable.token = 'xyz'; // Vue warning in dev

// ── markRaw: skip proxy for third-party objects
class MySDK { constructor() { this.id = Math.random(); } }
const sdk = markRaw(new MySDK());
const store = shallowReactive({ sdk });
console.log(isReactive(store.sdk)); // false — intentional

// ── Runtime checks ─────────────────────────────
import { ref } from 'vue';
const r = ref(0);
console.log(isRef(r));       // true
console.log(isRef(0));       // false