Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<script setup> import { ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'; const mouseX = ref(0); const mouseY = ref(0); let rafId = null; let socket = null; function onMouseMove(e) { mouseX.value = e.clientX; mouseY.value = e.clientY; } function tick() { // rAF loop example rafId = requestAnimationFrame(tick); } onMounted(() => { window.addEventListener('mousemove', onMouseMove); tick(); socket = new WebSocket('wss://example.com/ws'); socket.onmessage = (e) => console.log('WS:', e.data); }); onBeforeUnmount(() => { // Children still alive — trigger closing animations here console.log('About to unmount — children alive'); }); onUnmounted(() => { window.removeEventListener('mousemove', onMouseMove); cancelAnimationFrame(rafId); socket?.close(); console.log('Cleanup complete'); }); </script> <template> <p>Mouse: {{ mouseX }}, {{ mouseY }}</p> </template>
Result
Open