shallowRef & markRaw

import { ref, shallowRef, triggerRef } from 'vue'

// ref: deep reactivity — tracks all nested changes
const deepData = ref({ users: [{ name: 'Alice', score: 100 }] })
deepData.value.users[0].score = 200 // ✅ Triggers reactivity update

// shallowRef: shallow — only .value replacement is tracked
const shallowData = shallowRef({ users: [{ name: 'Alice', score: 100 }] })
shallowData.value.users[0].score = 200 // ❌ NOT reactive — no update

// Force update after mutation with shallowRef:
shallowData.value.users[0].score = 200
triggerRef(shallowData) // Manually trigger reactivity

// When to use shallowRef:
// 1. Large datasets that replace entirely (API responses)
const tableData = shallowRef<Row[]>([])
async function refresh() {
  tableData.value = await api.getRows() // Complete replacement — reactive
}

// 2. Objects from external libraries that must not be proxied
const chartInstance = shallowRef<Chart | null>(null)
chartInstance.value = new Chart(canvas, config) // Chart is not proxied

import { reactive, shallowReactive } from 'vue'

// reactive: ALL levels are reactive
const deep = reactive({
  count: 0,
  user: { name: 'Alice', address: { city: 'Paris' } }
})
deep.user.address.city = 'Lyon' // ✅ Triggers reactivity

// shallowReactive: ONLY top level is reactive
const shallow = shallowReactive({
  count: 0,
  user: { name: 'Alice', address: { city: 'Paris' } }
})
shallow.count = 1 // ✅ Reactive — top level property
shallow.user = { name: 'Bob' } // ✅ Reactive — replacing top-level ref
shallow.user.name = 'Charlie' // ❌ NOT reactive — nested mutation
shallow.user.address.city = 'Lyon' // ❌ NOT reactive — deeply nested

// Use case: a list of items where items are only replaced, not mutated
const state = shallowReactive({
  items: [] as Item[],
  total: 0,
  isLoading: false
})

// Replacing items is reactive, individual item mutation is not
state.items = newItems // ✅ Reactive
state.items[0].price = 20 // ❌ Not reactive — use full replacement

import { reactive, markRaw, ref } from 'vue'

// External library instances that break when proxied
class WebSocketClient {
  private socket: WebSocket
  // ... WebSocket has internal state that Proxy breaks
}

const state = reactive({
  // ✅ markRaw — prevents Vue from proxying the WebSocket client
  wsClient: markRaw(new WebSocketClient('wss://api.example.com')),

  // ✅ markRaw — large static lookup that should not be observed
  countryList: markRaw(getCountryDatabase()), // 200 countries, never changes

  // ✅ markRaw — class instance with custom property descriptors
  threeScene: markRaw(new THREE.Scene()),

  // ❌ No markRaw — Vue proxies this object (correct for reactive data)
  userData: { name: 'Alice', score: 0 }
})

// Check if an object is marked as raw
import { isReactive } from 'vue'
isReactive(state.wsClient)    // false — markRaw prevented proxying
isReactive(state.userData)    // true — reactive object