Framework entegrasyonları · Vue + Three

Reaktif Kaçış & Performans: rAF Sonrası Vergi Ne Zaman Kalır?

markRaw ve doğru rAF çoğu vitrini taşır; sıcak yollarda reaktivite vergisi hâlâ ürünü yer. Bu sayfa ölçülmüş kaçış eşiğini anlatır: Vue 101 tekrarı, watchEffect kare dersi veya R3F / Angular kaçış kopyası değildir.

Holodepth bu yaprağı genel «optimize et» sloganı olarak yazmaz. Temel tik ve watchEffect yasağı Kare döngüsü & watchEffect yaprağında mühürlendi; burada soru «rAF nasıl kurulur?» değil, «doğru rAF sonrası hangi Vue vergisi kalır?». Proxy sınırı Reaktif şablon → Object3D yaprağındadır. R3F imperatif ada modeli Performans & imperatif kaçış yaprağındadır (Fiber uzlaştırma vergisi). Angular Zone eşiği Zone kaçışı & performans yaprağındadır (CD / OnPush adası). Ms / jank SLA Platform · FPS yaprağındadır. glTF LOD format / Platform asset izleklerindedir.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «markRaw ve rAF ilk kapılardır, son kapı değildir. Şablon seli, pause edilmemiş effect ve v-for kalabalığı ayrı vergidir. Sıcak çekirdek dar composable + Object3D ister. Ölçüm olmadan full imperatif borçtur. Vue + Three izleği burada kapanır.»

Bu sayfanın sınırı · komşu konularla ayrım

Bu sayfa Vue 3 + Three'de reaktif kaçış / performans eşiğini anlatır:

rAF doğruyken kalan reaktivite sinyalleri
stop / pauseEffect · effect ömrü
v-for kalabalığı vs instance köprüsü
Worker şeridi · ölçüm eşiği · izlek kapanışı

Bilinçli olarak dışarıda bırakılan konular:

watchEffect kare yasağı / useLoop → Kare döngüsü & watchEffect
markRaw / shallowRef temeli → Reaktif şablon → Object3D
R3F ref / shell ada → R3F · Performans & kaçış
Angular Outside / OnPush → Angular · Zone kaçışı
Pointer / picking → Olay bağları & picking
Loader / dispose → Yükleme & onBeforeUnmount
FPS ms dilimleri → Platform · InstancedMesh formül → Three · Vue Composition API 101 · glTF

Kısa ayrım: Bu sayfa «rAF sonrası ne zaman daha sert kaçılır?» · Kare döngüsü «tik grafiği üretmesin» · R3F kaçış «Fiber uzlaştırma adası» · Angular kaçış «Zone / CD adası» · Platform «ms dilimi».

Ölçüm eşiği: kapı önce burada

«Daha akıcı hissettim» kaçış kararı değildir. Holodepth: aynı kamera yolu, aynı sahne yoğunluğu, taban ms / p99 (Platform · FPS). rAF ve markRaw uygulandıktan sonra JS dilimi hâlâ şişiyor mu? Şablon patch sayısı kareyle korelasyonlu mu? GPU sakin ama Vue «yanıyor» mu?

Eşik yazılmadan full imperatif composable veya her kalabalığı instance yapmak prematüre borçtür. Önce ölçün, sonra hangi salonda vergi kaldığını adlandırın.

Kaçış ölçümsüz slogan değil; kanıtlı eşik kararıdır.

rAF doğru, vergi kalır

Kare döngüsü reaktif kapı dışında, Object3D markRaw hattında yaşasa bile Vue ağacı başka kanallardan sarsılabilir. Holodepth sinyal listesi: parent her tur yeni object literal prop basıyor; computed her kareye bağlı ref okuyor; global store / provide-inject seyrek değil sık güncelleniyor; Tres şablonu sürekli prop yeniliyor; picking her pointermove'da ref yazıyor (önceki yaprakta seyreltildi mi?).

Bu tablo «Vue yavaş» değil «vergi hangi salonda?» sorusudur. R3F'de uzlaştırma, Angular'da CD; Vue'da şablon patch + effect grafiğidir. markRaw tek başına şablon selini durdurmaz.

stop ve pauseEffect: ömür vergisi

Kare yaprak watchEffect yasağını anlattı; kaçış yaprak effect ömürünü anlatır. Mount'ta açılan watch, watchEffect veya watchPostEffect unmount'ta stop() ile kapatılmazsa hayalet izleme devam eder. Gizli sekme veya vitrin pause bayrağı varken effect hâlâ graf güncelliyorsa pil ve CPU faturası sürer.

Holodepth: sıcak sahne composable'ı dar API sunar; dışarıdan gelen active veya quality seyrek ref'tir. Effect içinde her kare mesh itmek yerine pause edilmiş effect veya manuel pause / resume (Vue 3.5+) ile grafı dondurun. onBeforeUnmount yalnızca rAF stop değil; tüm effect stop siluetinin parçasıdır.

v-for kalabalığı vs instance

Binlerce <TresMesh v-for="item in crowd" :key="item.id"> hem Vue patch hem Three draw tarafında pahalıdır. Reaktif harita yaprak :key remount uyarısını verdi; kaçış yaprak eşiği sorar: N kaçta v-for terk edilip InstancedMesh köprüsüne geçilir? Karar ürün ticket'ında yazılır; instancing matematiği Three omurgasındadır.

Kaba süzgeç
Ölçek	İlk tercih	Kaçış
Onlarca unique parça	v-for + dar prop	Nadiren
Yüzler–binler benzer	Instance + ince shell	Şablon patch / draw
Her biri unique material graph	Atlas / sınırlı varyant	Instance tek başına yetmez

Shell şablon · sıcak composable

Holodepth model: canvas host, ışık, kamera, seyrek panel bağları şablonda veya Tres deklaratifinde kalır; parçacık, trail, kalabalık gibi sıcak çekirdek useHotStage benzeri composable içinde markRaw Object3D üzerinde yaşar. R3F «shell deklaratif · ada ref» ile aynı diplomatiktir; fark Vue'da composable + provide-inject sınırıdır.

Parent her saniye yeni { x, y, z } literal gönderiyorsa OnPush benzeri «seyrek prop» kuralı kırılır. Dar API: 2–3 ref veya emit; içeride buffer tick. Tüm uygulamayı «Vue'suz Three»ye çevirmek nadiren kazançtır.

Ağır işi şeritten çıkarın

Büyük dizi map'i, pathfinding, mesh birleştirme ana iş parçacığında reaktivite fark etmeksizin jank üretir. Worker veya async chunk offload ürün kararıdır; sonuç main'de seyrek watch ile merge edilir. Holodepth: kaçış yalnızca Proxy değildir; CPU şeridi de olabilir. Worker mesajlarında structured clone maliyetini ve COUNT tavanını bilin.

Kaçış disiplini

Ölç (taban ms, patch / effect sayımı, dilim).
rAF + markRaw + effect stop doğrula.
Şablon seli ve prop referans yağmuruna dokun.
v-for eşiğinde instance veya worker.
Full imperatif ancak kanıtla ve belgele.

Angular kaçışındaki Outside sırası burada «doğru tik → dar composable → liste/instance → radikal» olur. Borç: COUNT tavanı, sahiplik, neden kaçıldığı üç satır ticket.

Yanlış kaçışlar

Ölçüm yokken tüm sahneyi composable'a taşımak.
GPU bound sorunu görüp yalnız Vue Proxy'sini suçlamak.
Her kalabalığı instance yapmak (unique graph varken).
Effect stop unutup «pause» bayrağına güvenmek.
markRaw yazıp her kare :rotation-y bağlamak (çift kapı).
useFrame veya NgZone ezberi (Vue'da Fiber store veya Zone yok).

Güvenli ada: simüle kaçış

Örnekler öğretim amaçlıdır. rAF / markRaw önceki yapraklarda varsayılır. Vue reaktivite 101 öğretilmez.

Simüle · dar shell + effect stop. Dışarıya yalnız active ve quality; sıcak tick composable içinde.

import { shallowRef, watch, onBeforeUnmount, markRaw } from 'vue'
import * as THREE from 'three'

/**
 * Shell şablon seyrek prop alır · sıcak çekirdek composable'da.
 * active/quality her tur yeni object literal DEĞİL · primitive veya sabit ref.
 */
export function useHotStage(
  scene: THREE.Scene,
  active: { value: boolean },
  quality: { value: 'low' | 'high' },
) {
  const root = shallowRef(markRaw(new THREE.Group()))
  scene.add(root.value)

  let raf = 0
  const clock = new THREE.Clock()
  const COUNT = quality.value === 'high' ? 128 : 64

  const tick = () => {
    if (!active.value) return
    const t = clock.getDelta()
    root.value.rotation.y += t * 0.6
    raf = requestAnimationFrame(tick)
  }

  const stopWatch = watch(
    () => [active.value, quality.value] as const,
    ([on]) => {
      cancelAnimationFrame(raf)
      raf = 0
      if (on) {
        clock.start()
        raf = requestAnimationFrame(tick)
      }
    },
    { immediate: true },
  )

  onBeforeUnmount(() => {
    stopWatch()
    cancelAnimationFrame(raf)
    scene.remove(root.value)
  })

  return { root, COUNT }
}

Simüle · v-for terk · instance yüzeyi. Angular @for veya R3F JSX listesi yok; tek InstancedMesh.

import { markRaw, shallowRef } from 'vue'
import * as THREE from 'three'

const COUNT = 400 // Ürün tavanı · profil ile doğrula · kullanıcıdan sınırsız alma

/** v-for YOK · tek InstancedMesh · tick useLoop / rAF'ta */
export function useCrowdInstances(scene: THREE.Scene) {
  const geo = new THREE.BoxGeometry(0.2, 0.2, 0.2)
  const mat = new THREE.MeshStandardMaterial({
    color: '#9aa6b8', roughness: 0.5, metalness: 0.15,
  })
  const mesh = markRaw(new THREE.InstancedMesh(geo, mat, COUNT))
  const shell = shallowRef(mesh)
  scene.add(mesh)

  const dummy = new THREE.Object3D()

  return {
    shell,
    tick(elapsed: number) {
      for (let i = 0; i < COUNT; i++) {
        const col = i % 20
        const row = (i / 20) | 0
        dummy.position.set(col * 0.35 - 3.5, Math.sin(elapsed + i * 0.01) * 0.15, row * 0.35 - 3.5)
        dummy.rotation.y = elapsed * 0.4 + i * 0.02
        dummy.updateMatrix()
        mesh.setMatrixAt(i, dummy.matrix)
      }
      mesh.instanceMatrix.needsUpdate = true
    },
    dispose() {
      scene.remove(mesh)
      geo.dispose()
      mat.dispose()
    },
  }
}

Güvenlik: COUNT / buffer boyutunu kullanıcı girdisinden doğrulamadan şişirmeyin. Composable dispose yükleme yaprağıyla aynı sahiplik dilimindedir.

Kaçış tuzakları

Premature composable: ölçüm yok, okunabilirlik yok.
Hayalet effect: stop unutulmuş watchEffect.
Çift kapı: markRaw + her kare şablon prop.
v-for unutulmuş: instance yok patch var.
GPU'yu Vue sanmak: yanlış dilim.
COUNT sınırsız: bellek DoS.
Dispose yok: composable sızıntısı.
Kare dersi tekrarı: watchEffect yasağı bu sayfada yeniden öğretilmez.

Üç kaçış profili

01 · Kaçış
Vitrin (yumuşak)

Seviye

rAF + markRaw + effect stop

Şablon

Az unique parça · seyrek prop

Risk

Erken full imperatif
02 · Kaçış
Sıcak FX composable

Seviye

Dar ref · buffer tick

Effect

pause / stop mühürlü

Risk

Parent object literal
03 · Kaçış
Kalabalık

Seviye

Instance · v-for terk

Tavan

COUNT ürün sabiti

Risk

Unique material tuzağı

Holodepth perspektifleri

Sırayı unutmayın

Doğru tik → effect ömrü → şablon seli → v-for/instance → radikal. Tersten başlamak pahalıdır.

Shell'i koruyun

Tüm Vue şablonunu silmek nadiren kazançtır; dar composable çoğu zaman yeter.

Borcu yazın

COUNT, effect stop, neden kaçıldığı: üç satır ticket.

Teşhis maddeleri

rAF doğruyken hâlâ şablon patch yangını var mı?
Effect'ler unmount'ta stop ediliyor mu?
Prop referansları her tur yenileniyor mu?
v-for ölçeği instance eşiğini geçti mi?
GPU bound yanlışlıkla Vue'ya mı yükleniyor?
Önce-sonra ölçüm alındı mı?
COUNT tavanı var mı?
watchEffect kare dersi bu sayfaya sızmış mı?

Holodepth içgörüsü

Vue + Three performansı «Proxy'yi kapat» sloganı değildir; verginin hangi salonda olduğunu bilmektir. İzlek: mount → harita → tik → kargo → bağ → kaçış.

İzlek kapanışı · sonraki kapılar

Vue + Three alt ana konusu bu yaprakla kapanır. Ölçüm için Platform · FPS yaprağına dönün. Framework kardeş köprüleri: R3F imperatif kaçış ve Angular Zone eşiği yukarıda linklendi. Döngü için Mount & kök sözleşmesi yaprağına dönebilirsiniz; Angular host omurgası Host & kök sözleşmesi yaprağında karşılaştırmalı okunabilir.

Bu sayfada öğrendikleriniz

Ölçüm eşiği (1).
rAF sonrası vergi (2).
stop / pauseEffect (3).
v-for vs instance (4).
Shell / composable (5).
Worker şeridi (6).
Kaçış disiplini (7).
Yanlış kaçışlar (8).
Simüle ada (9).
Tuzaklar (10).
Üç profil (11).
Holodepth perspektifleri (12).
İzlek kapanışı (13).

Komşu sayfalar

Vue + Three grubunun altıncı ve son yaprağıdır. Picking öncekinde; izlek burada kapanır. R3F imperatif kaçış ve Angular Zone eşiği kardeş köprülerdir; ms teşhisi Platform FPS yaprağındadır.

Vitrin (yumuşak)

Sıcak FX composable

Kalabalık

Sırayı unutmayın

Shell'i koruyun

Borcu yazın

Teşhis maddeleri