I teamed up with the amazing Michael Thiessen to promote our newsletters cross-wise. He shares great Vue tips and insights each week, and his newsletter was the main inspiration for this one. Check it out if you haven't already.
The main difference between our newsletters is that Michael's is focused on Vue tips and insights, while my newsletter provides Vue & Nuxt tips and curated links to articles, videos, events, and more. I hope you enjoy both newsletters and find them valuable.
👉🏻 A lightweight & flexible Vue 3 library for creating applications with the 2D rendering system PixiJS.
🔥 Vue Tip: When You Should Use a Composable
Vue Composables are a way to encapsulate logic in a reusable way and they are one of my favorite features of Vue 3.
They are a great way to share logic between components, but I often see them used in places where they are not needed. In this short tip, I will explain when you should use a composable and when you should not.
What do you think, would you call this method a composable or not?
The answer is: No.
Let's take a look at the official documentation: "In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic".
The key part here is stateful logic which involves "managing state that changes over time". In our example, we are not using any reactive state, so this is not a composable. I would call it a utility/helper function.
Let's define a simple rule of thumb: If your function does not manage any reactive state, doesn't register any lifecycle hooks or doesn't provide/inject anything, it is not a composable.
Finally, let's take a look at a good example of a composable:
This composable manages the mouse position and provides two reactive values. It also registers and unregisters an event listener when the component is mounted and unmounted.
👉🏻 Dave wrote an in-depth article about theory and practice of migrating any existing Nuxt site to layers – with detailed, step-by-step instructions and gotchas.
👉🏻 "Time to first byte" is a solid metric for understanding how your web performance measures up, and is arguably one of the more important considerations for ecommerce.
👉🏻 Kirby is a classic Nintendo game where you control a squishy pink alien with a massive appetite. 👉🏻 In this freeCodeCamp course, you'll code your own version of Kirby that runs in a browser.
👉🏻 The Google team unveiled the Web Platform Dashboard, a way to see the web platform mapped as a set of features, along with their cross browser support.
😂 Fun
Comments? Join the discussion about this issue in our Discord community.
评论
发表评论