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:
typescript
// 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:
typescript
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:
typescript
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.