🤔 Vue 3 Proxy Tespit & Önleme Rehberi

“Proxy’nin sarmadığı tek şey developer’ın sabrıdır.” – Ayhan

---

📈 Giriş: Vue 3 Neden Proxy Kullanır?

Vue 3’te reactive() ve ref() fonksiyonları, JavaScript'in Proxy yapısını kullanarak reaktif veri sistemi kurar. Bu proxy’ler sayesinde Vue, bir nesnedeki değişiklikleri izler ve otomatik olarak arayüzü günceller.

Ama... dış dünya (SDK’lar, native API’ler, class instance’ları) bu Proxy’lerle uyumsuz çalışabilir.

---

⚠️ Proxy Bulaşma Durumları

Ne Yaparsan	Ne Olur?
const a = reactive({ foo: obj })	obj proxy’ye sarılır
const a = ref(new Class())	a.value proxy’ye sarılır
state.obj = new ExternalClass()	Vue bunu Proxy’ler, kafayı yer
JSON.stringify(proxy)	Boş veya hata
instanceof kontrolleri	Bozulur (false) olur

---

🔎 Proxy Tespiti

1. isProxy(obj)

import { isProxy } from 'vue'
console.log(isProxy(obj)) // true veya false

2. toRaw(obj)

import { toRaw } from 'vue'
const realObj = toRaw(obj) // Proxy değil, gerçek nesne

---

🛡️ Proxy’den Korunma

✅ markRaw(obj)

Vue’ya: “Bunu asla proxy’leme” demek.

import { markRaw } from 'vue'

const agent = markRaw(new SipAgent())

Kullan:

• SDK class instance’ları
• WebSocket, MediaStream, JsSIP gibi native nesneler
• navigator.hid cihazları

---

✅ shallowRef(obj)

Sadece .value seviyesinde proxy’ler, içeriye karışmaz.

const device = shallowRef({ connected: false })

Kullan:

• Vue bileşenlerinde temel state objeleri
• İçinde markRaw() kullandığın derin class'lar varsa

---

✅ Vue’dan Bağımsız Tut

Sınıflar Vue’yu tanımasın, Vue sadece sinyali dinlesin.

// store dışında
let session = markRaw(new SipSession())

// event emitter ile Vue'ya bildir
session.on('stateChange', (s) => store.sessionState = s)

---

💨 Yapmaman Gerekenler

// Bunlar lanet proxy bulaştırır
const sip = ref(new JsSIP.UA(...))
const state = reactive({ provider: new Jabra() })
store.provider = new WebHIDDevice()

---

🔧 Proxy ile Başa Çıkma Stratejisi

Durum	Ne Yapmalı
Sınıf method’ları çalışmıyor	markRaw ile sar
instanceof bozuldu	toRaw(obj) instanceof Class
Vue bileşeni değişimi görmüyor	ref().value = { ...value } ile
SDK tipi hata veriyor	let obj = new Class() dışarda

---

📘 Sonuç

Vue 3 Proxy’si seni arayüzde uçurabilir, ama sınıfa, SDK’ya, native objeye bulaştığında seni delirtebilir. Bunu Vue'nun değil, JavaScript’in dahili bir silahı olarak gör, ama ne zaman susturacağını öğren.

---

yada git vu3 den kaç svelte, react veya angular kullan, genç kal hayatını yaşa