Encapsulating Logic with Composables

Snippet

Encapsulating Logic with Composables

Composables allow you to extract stateful logic into reusable functions. By using Vue's lifecycle hooks inside these functions, you can create clean, modular code that is easy to test and share across components.

snippet.js
javascript
import { onMounted, onUnmounted } from 'vue';
 
export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);
 
  const update = (e) => {
    x.value = e.pageX;
    y.value = e.pageY;
  };
 
  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));
 
  return { x, y };
}

vue

Breakdown

export function useMousePosition()

Naming convention 'use...' identifies this as a Vue Composable.

onUnmounted(() => window.removeEventListener(...))

Crucial for preventing memory leaks when the component is destroyed.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Encapsulating Logic with Composables

Related