🔥 (#150) Watching props, useRequestHeader, optimizing for humans
Hey all!
This week I've been working on adding multi-product support to my platform.
Here's a video of the simple drop down I made — I love working with UI elements like this!
I'm doing this because my next big project is to update Reusable Components.
I plan to re-launch it around March-ish, and everyone who already owns it will get this update.
The scope of this update isn't totally nailed down yet, but I'm trying to keep this smaller so I can actually get it out to you in March!
I also just published an article on generating SSR Safe Dynamic IDs.
Enjoy your tips!
— Michael
Vue Tips Collection 2
Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.
Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing.
🔥 How to Watch Props for Changes
With the Composition API, we have several great options for watching props.
The recommended approach would be using either watch or watchEffect in your script setup:
import { watch, watchEffect } from "vue"; const props = defineProps<{ count: number }>(); watch( () => props.count, (val) => { console.log(val); } ); watchEffect( () => console.log(props.count) ); Script Setup + Composition API
When using the watch method, we have to provide a getter function instead of passing the value directly. This is because the prop object itself is reactive, but the individual props are not.
You can test this for yourself by passing in the reactive prop object directly:
watch( props, (val) => { console.log(val); } ); The difference between watch and watchEffect is that watch requires us to specify exactly what we're watching, while watchEffect will simply watch every value that is used inside of the method that we pass to it.
So we have a tradeoff between simplicity and flexibility.
Composition API + Options API
If you're using the setup() function within the Options API, the only difference is in how we specify the props. Otherwise, everything else works exactly the same:
import { watch, watchEffect } from "vue"; export default { props: { count: { type: Number, required: true, }, }, setup(props) { watch( () => props.count, (val) => { console.log(val); } ); watchEffect(() => console.log(props.count)); }, }; Options API
The process is straightforward with the Options API.
Just use the name of the prop as the name of the watcher, and you're good to go!
export default { props: { count: { type: Number, required: true, }, }, watch: { count(val) { console.log(val); }, }, }; Although this syntax is simpler than the Composition API syntax, the tradeoff is that there is far less flexibility.
If you want to watch multiple things at once, or have any fine-grained control over the dependencies, the Composition API is much easier to use.
🔥 Optimize for Humans
The most important thing we can do when writing code is to make it work.
The second most important thing is to make it understandable to other humans — including ourselves.
All too often we write clever code, terse code, code that isn't even understandable to ourselves when we come back to it a week or a month later.
Here are some ways to fix that:
- Extract Components — by replacing a chunk of code with a meaningful name, we can separate the intention of the code from the implementation of the code. Good names are the most valuable form of abstraction that we have.
- Shorter components — longer components are harder to understand at a glance, and that should be the ideal we strive for. The harder it is to understand a single component, the more mistakes you'll make, and the longer it will take for you implement anything new.
- Optimize for the most tired, frustrated version of yourself — Remember that we all have bad days, and we want to productive every day, not just our best days. Write code that even the worst version of you can understand.
🔥 Using useRequestHeader
Grabbing a single header from the request couldn't be easier in Nuxt:
const contentType = useRequestHeader('content-type'); This is super handy in middleware and server routes for checking authentication or any number of things.
If you're in the browser though, it will return undefined.
This is an abstraction of useRequestHeaders, since there are a lot of times where you need just one header.
📜 Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)
So far in this series we've covered a lot on how to use Prisma in our Nuxt 3 apps.
But we've left out a major piece — actually being able to modify the data in the database.
A pretty crucial part of the puzzle I think!
In this article I'll show you how to modify data in your database using Prisma.
Check it out here: Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)
💬 Indirection
"Any problem in computer science can be solved with another layer of indirection, except of course for the problem of too many indirections." — Bjarne Stroustrup
🧠 Spaced-repetition: Restrict a prop to a list of types
The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬
Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.
With the Composition API we get fantastic TypeScript support, so this is quite straightforward:
defineProps<{ src: string; style: 'square' | 'rounded'; }>(); Doing this in the Options API is more complicated, and not as powerful as TypeScript.
Using the validator option in a prop definition you can restrict a prop to a specific set of values:
export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) } } }; This validator function takes in a prop and returns either true or false — if the prop is valid or not.
I often restrict props like this when I need more options than a boolean will allow but still want to restrict what can be set.
Button types or alert types (info, success, danger, warning) are some of the most common uses — at least in what I work on. Colours, too, are a really great use case for this.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components
评论
发表评论