reactivity عمیق Vue راحت است، اما برای آرایه‌ای با ده‌ها هزار آیتم یا نمونهٔ یک کتابخانهٔ بیرونی (مثل نقشه یا نمودار) هزینه دارد: Vue باید همهٔ سطوح را پراکسی کند و ردیابی کند.

shallowRef

فقط خودِ .value reactive است. تغییر داخلی اشیا ردیابی نمی‌شود؛ برای به‌روزرسانی باید مقدار را جایگزین کنید.

import { shallowRef } from "vue";

const rows = shallowRef([]);

async function load() {
  rows.value = await fetch("/api/rows").then(r => r.json());
}

function add(row) {
  rows.value = [...rows.value, row]; // جایگزینی، نه push
}

markRaw

اگر شیئی نباید هرگز reactive شود (مثلاً نمونهٔ یک نقشه)، آن را با markRaw علامت بزنید تا Vue پراکسی‌اش نکند:

import { markRaw, ref } from "vue";

const map = ref(null);
map.value = markRaw(new MapLibraryInstance());
  • با triggerRef(rows) می‌توانید پس از تغییر داخلی، به‌روزرسانی را دستی راه بیندازید.
  • قبل از بهینه‌سازی اندازه بگیرید؛ برای داده‌های کوچک ref معمولی مناسب‌تر و ساده‌تر است.