Vue.js 3 Composition API – Dynamic LifeCycle injections

Vue.js Composition API – it’s all about reusability

Composition API is the new additional API in Vue.js which is a part of Vue.js version 3.0  or it is available for vue.js version 2.6x as a Plugin.

You can read a full RFC here

Composition API give you many new ways to compose logic in your apps. In this blogpost we will talk only about Dynamic LifeCycle Injection.

When you are using Vue 3 you don’t need to install it. It will be available directly in the Vue import.

If you use it as a Plugin you can get the same API functions from the @vue/composition-api import.

Dynamic LifeCycle injections

This is a fancy term, but in reality, it is very easy to understand.

Before I start to explain how they work I wanted to mention that some LifeCycle hooks were renamed. Most hooks will be available with the new on prefix. You can read more about renaming pattern on the official  Vue 3.0 docs

Whenever you use a composition function inside your new setup() method all Lifecycle hooks which were written inside the composition function will be injected in the lifeCycle of your component and will run before your component lifeCycle will be executed.

Example

Let’s say you have a component like this.

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('register global event')
    })
    onUnmounted(() => {
      console.log('remove global event')
    })
  }
}

You can refactor this hooks to a composition api. This is very useful when you have to register and unregister global Events like drag or resize. How you will reuse logic in your code it is up to you. Limit is only your imagination.

This is how our component will look like when we will use the composition function.

import useWindowResize from '../use/useWindowResize.js'
export default {
  setup() {
    const {width, height} = useWindowResize()
    return {width, height}
  }
}

In out composition function will will export the information about width and height of the window. Which we can use in any Vue component.

import { onMounted, onUnmounted, ref } from "vue";

export default function useWindowResize() {
  const height = ref(null);
  const width = ref(null);

  function resize() {
    height.value = window.innerHeight;
    width.value = window.innerWidth;
  }

  onMounted(() => {
    resize()
    window.addEventListener("resize", resize);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", resize);
  });

  return { height, width };
}

Now can use this composition function to compose it with other composition functions or use in any component we like.

Vue composition API gives you an awesome way to reuse global events. But with Vue Global Event Plugin you can do it event better.

Thanks to Vue’s event modifiers, handling events is extremely easy however, you’re limited to DOM element events. Vue Global Event will provide an easy to use interface to register different evens on the element in the same way how you do it on Vue components.

If you want something more suitable for global events I recommend Vue Global Event Plugin which already has a Vue 3 support.