Heyo,
Do you like hot sauce?
Well, I tried making some last week, and it was an utter failure. So I'll stick with baking bread.
And if you don't like hot sauce, maybe you'll enjoy these hot tips instead.
— Michael
If you've got large chunks of static or mostly static content, you can tell Vue to ignore it using the v-pre
or v-once
directives:
<template><!-- These elements never change --><div v-pre><h1 class="text-center">Bananas for sale 🍌</h1><p>Come get this wonderful fruit!</p><p>Our bananas are always the same price — $1 each!</p><div class="rounded p-4 bg-yellow-200 text-black"><h2>Number of bananas in stock: as many as you need</h2><p>That's right, we never run out of bananas!</p></div><p>Some people might say that we're... bananas about bananas!</p></div></template>
These can be useful performance optimizations if you need them.
With v-pre
Vue will treat the element and it's children as static HTML, and won't do any of it's magic on it. The v-once
directive tells Vue to evaluate it once, and then never update it again.
Here are the docs for v-pre and v-once.
Here's a technique for splitting up components:
The code you write forms natural groups. You want to identify these groups, and the seams that run between them.
Once you do that, it's easy to extract components — by keeping things in their natural groups as much as possible.
The Component Seams Framework helps you do that in just three steps:
This method is covered in more detail in Clean Components if you want to learn more.
I've written 58 Vue tips so far this year for you.
That's 2 every week for 29 weeks (since March 22).
I put 25 of them together for you in this one article (which is one of the top Vue posts of all time on DEV.to).
Read it now: 25 Vue Tips You Need to Know
It's coming October 12.
This is going to be huge, and I can't wait to try it out:
Learn more about what's coming with Nuxt 3.
Sometimes the problem is to discover what the problem is. — Gordon Glegg
I've wasted so much of my life trying to solve things that weren't actually problems.
Now I try to make sure that what I think is the problem is actually the problem.
It saves me so much time and effort.
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.
When a function does more than just return a value, it makes your code more complicated.
These are called side effects, and you should never have them inside of a computed prop:
export default {computed: {fullName() {this.fetchUserInformation(); // Side effectreturn `${this.firstName} ${this.lastName}`;},},};
However, fixing this is quite straightforward. We can just move that side effect into a watcher that is triggered whenever the computed prop updates:
export default {computed: {fullName() {return `${this.firstName} ${this.lastName}`;},},watch: {fullName() {this.fetchUserInformation(); // Side effect},},};
This applies equally to the composition API, although the syntax is slightly different.
At first glance, this may seem like we made the code more complicated. But actually, we've made it a lot simpler.
This concept is expanded on in my course, Clean Components.
p.s. I also have two courses: Reusable Components and Clean Components