Create Vue 3 Apps with the Composition API — Lifecycle Hooks and Refs

Photo by Derek Thomson on Unsplash

It lets us extract logic easily an not have to worry about the value of this in our code.

It also works better with TypeScript because the value of this no longer has to be typed.

In this article, we’ll look at how to create Vue 3 apps with the Composition API.

Lifecycle Hooks

Lifecycle hooks are also available with Vue 3’s composition API.

We put them all in the setup method.

For instance, we can write:

<template>
<div></div>
</template>
<script>
import { onMounted, onUnmounted, onUpdated } from "vue";
export default {
name: "App",
setup() {
onMounted(() => {
console.log("mounted!");
});
onUpdated(() => {
console.log("updated!");
});
onUnmounted(() => {
console.log("unmounted!");
});
},
};
</script>

We pass in the callback into the lifecycle functions.

beforeCreate and created are replaced with the setup method.

And the following are the composition API equivalents of the options API hooks:

  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • activated -> onActivated
  • deactivated -> onDeactivated
  • errorCaptured -> onErrorCaptured

The left side has the options API hooks and the right side has the composition API equivalents.

Composition API also have 2 debug hooks:

  • onRenderTracked
  • onRenderTriggered

We can write:

export default {
onRenderTriggered(e) {
debugger
}
}

to inspect which dependency is causing the component to re-render.

Dependency Injection

We can inject dependencies with the provide and inject functions.

provide and inject enables dependency injection similar to project and inject in Vue 2.x.

For instance, we can write:

<template>
<div></div>
</template>
<script>
import { provide, inject } from "vue";
const ThemeSymbol = Symbol();
const Ancestor = {
setup() {
provide(ThemeSymbol, "dark");
},
};
export default {
name: "App",
setup() {
const theme = inject(ThemeSymbol, "light");
return {
theme,
};
},
};
</script>

We have the Ancestor component, which calls provide to let us pass the dependency identified with ThemeSymbol down to the App component.

In App ‘s setup method, we call inject with ThemeSymbol to get the data passed in from provide .

'light' is the default value if nothing with the identifier ThemeSymbol is provided.

Template Refs

Composition API lets us access template refs.

We use the ref function to create the ref.

Then we can assign it in the template to the element or component we want.

For instance, we can write:

<template>
<div ref="root"></div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
name: "App",
setup() {
const root = ref(null);
    onMounted(() => {
console.log(root.value);
});
    return {
root,
};
},
};
</script>

We create the root ref with the ref function.

Then we set the name of the ref to the ref attribute.

Then root.value would be the div.

If we use a render function, we write:

<template>
<div></div>
</template>
<script>
import { ref, onMounted, h } from "vue";
export default {
name: "App",
setup() {
const root = ref(null);
    onMounted(() => {
console.log(root.value);
});
    return () =>
h("div", {
ref: root,
});
},
};
</script>

to assign the ref to the div we create in the h function.

Conclusion

We can add lifecycle hooks and refs into our Vue 3 app with the composition API.

More content at plainenglish.io


Create Vue 3 Apps with the Composition API — Lifecycle Hooks and Refs was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.