Vue.jsDeep reactivity có overhead — Vue track tất cả nested properties. Các APIs này cho phép opt-out:
shallowRef: chỉ track .value thay đổi, không deep-track nội dung:
// Dùng cho large objects không cần nested reactivity
const bigData = shallowRef({ /* 1000 properties */ })
bigData.value = newData // Trigger update
bigData.value.name = 'new' // KHÔNG trigger updateshallowReactive: tương tự cho object — chỉ track top-level properties:
const state = shallowReactive({ user: { name: 'Alice' }, list: [] })
state.user = newUser // Trigger update
state.user.name = 'Bob' // KHÔNG trigger updatemarkRaw: đánh dấu object không bao giờ bị reactive — dùng cho third-party instances:
import { markRaw } from 'vue'
const chartInstance = markRaw(new Chart(canvas, config))
const state = reactive({ chart: chartInstance }) // chart không bị Proxy wrapDùng khi: large data structures không cần deep reactivity, third-party class instances (Chart.js, mapbox), performance-critical list items.
Deep reactivity has overhead — Vue tracks all nested properties. These APIs opt out:
shallowRef: only tracks .value changes, no deep tracking:
const bigData = shallowRef({ /* 1000 props */ })
bigData.value = newData // Triggers update
bigData.value.name = 'new' // Does NOT triggershallowReactive: only top-level properties tracked:
const state = shallowReactive({ user: { name: 'Alice' } })
state.user = newUser // Triggers
state.user.name = 'Bob' // Does NOT triggermarkRaw: never make reactive — for third-party instances:
const chart = markRaw(new Chart(canvas, config))
const state = reactive({ chart }) // chart not Proxy-wrappedUse for: large non-nested data, third-party class instances (Chart.js, Mapbox), performance-critical lists.