دورة الحياة والوصول إلى DOM وتنظيف الأثر

<script setup>
import { ref, onMounted, onUnmounted } from "vue"
const width = ref(null)
function updateWidth() { width.value = window.innerWidth }
onMounted(() => {
  updateWidth()
  window.addEventListener("resize", updateWidth)
})
onUnmounted(() => window.removeEventListener("resize", updateWidth))
</script>

<template>
  <p>{{ width === null ? "Measuring window" : `Width: ${width}` }}</p>
</template>

يتطلب مكوّناً مربوطاً بالمتصفح. يسبق المخرج المحايد قراءة العرض وتزيل الإزالة المعالج. لم ينفذ السلوك والعرض والتنظيف في متصفح لهذا الجزء.

function subscribe(target, handler) {
  target.addEventListener("change", handler)
  return () => target.removeEventListener("change", handler)
}
const active = new Set()
const target = {
  addEventListener: (_name, handler) => active.add(handler),
  removeEventListener: (_name, handler) => active.delete(handler)
}
const dispose = subscribe(target, () => {})
if (active.size !== 1) throw new Error("SUBSCRIPTION_MISSING")
dispose()
if (active.size !== 0) throw new Error("SUBSCRIPTION_LEAK")

يعمل بـ Node وبيانات الذاكرة فقط وينتقل العدد من واحد لصفر. لا يصل إلى DOM أو مستمع أو مؤقت أو خدمة ولا يدعي تغطية دورة الإطار.