Reusable Logic with Composables

Snippet

Reusable Logic with Composables

Composables are functions that leverage Vue's Composition API to encapsulate and reuse stateful logic across components. They replace older patterns like Mixins by providing better type safety and preventing namespace collisions.

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

vue

Breakdown

const x = ref(0);

Initialize a reactive reference for the horizontal coordinate.

onMounted(() => ...)

onUnmounted(() => ...)

Clean up the listener to prevent memory leaks when the component is destroyed.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Reusable Logic with Composables

Related