In this lesson, I want to share with you a mistake that I have made a number of times myself. And it has caused a few unexpected bugs for me. js documentation. So under the reusability section and composables, there's a heading called usage restrictions.
And I just want to read this to you. It says, composables should only be called in script setup or the setup hook. They should also be called synchronously in these contexts. And in some cases, you can also call them in lifecycle hooks like onMounted.
Now, these restrictions are important because these are the contexts where Vue is able to determine the current active component instance. Access to an active component instance is necessary so that number one, lifecycle hooks can be registered to it, and number two, computed properties and watchers can be linked to it so that they can be disposed of when the instance is unmounted in order to prevent memory leaks. And then finally here we have a tip at the bottom that says script setup is the only place where you can call composables after using await. The compiler automatically restores the active instance context for you after the async operation.
Okay, now if some of that is just a little bit cryptic, to be honest, I don't understand the full scope of this issue either. However, I can give you some hints about what you should do and then suggest some other things that you definitely should not do, even though they might work some of the time. So here's what I get out of this. Right back over my code editor, I have a component set up, and it's importing a composable called useA.
useA is absolutely dumb, right? It's really nothing but a function. It doesn't actually do anything. However, let me show you what you should do in order to use the useA composable.
So at the top here in directly inside my script setup section, I can call useA. get the composable out of it, so we'll just say a variable called a in this instance, and then I can do whatever I want to with a either in my template or throughout my script setup section. This is a good way to use a composable. Let's say I had an event handler, though, in which I wanted to put the a composable to use.
If I wasn't using this composable anywhere else inside of my function, I may be tempted to use it directly inside of my handler, just like this. However, this is what the Vue documentation is warning against. Instead, we always, always, always want to call the composable directly inside of script setup. Then we can use it down inside of our event handlers like this.
And then, of course, if there was some kind of functionality on this composable, you would say a dot do whatever. So some people, when I bring this up, say, what about using composables inside of other composables? Does this documentation mean that I always have to call my composables from within script setup? Well, it's a little bit confusing, but the answer is no.
Let me get rid of this event handler here. So we're using composable A inside of a component, inside of script setup. Let's say I also have now a composable B. So over here in my file structure, I'll open up use B, and it's just as dumb as use A.
But now let's say we want use A to use the use B composable. First, we would import use B, of course, and then we could call it inside of use A. And just like before we can assign it to some variable. Now this is the proper usage.
As long as we're calling use B at the top level of use A and use A is being called at the top level of our component that is directly inside of script setup, then everything is just fine. The issue comes in when we try to nest use B inside some event handler, just like we tried to do in the component. then this could become an issue. Now, I have used this on several different occasions and things have worked just fine.
The issue really comes into play when you're working with something asynchronous and in such cases, things get a little bit messy. And to be honest, it's a little bit over my pay grade. But the point being here is always use your composable at either the top level of your components inside of script setup or at the top level just inside your function that's defining the composable right here. If you follow that simple piece of advice, I promise you're going to save yourself some headaches down the road.