Hi!
First, I need to say a huge THANK YOU to all 212 of you who bought Clean Components in the sale that ended last week.
Your support of my work is absolutely astonishing â it's what gives me the motivation to keep creating.
So, it's officially the first day of fall, at least in the northern hemisphere.
Everything seems to be pumpkin-spiced these days:
Please tell me this pumpkin obsession is just a North American thing?
I'll spare you from pumpkin-spiced tips though. These ones are just the regular kind đ
â Michael
Here we have a simple Toggle
component that can show or hide content:
<template><Toggle title="Toggled Content">This content can be hidden by clicking on the toggle.</Toggle></template>
It keeps track of its own open
state internally right now.
But what if we want to override that internal state, but only some of the time?
To do this we have to dynamically switch between relying on props and events, and relying on internal state:
export default {name: 'Toggle',props: {title: {type: String,required: true,},hidden: {type: Boolean,// Must be set to `undefined` and not `false`default: undefined,}},data() {return {// Internal state_hidden: false,};},methods: {toggleHidden() {// Switch between emitting an event and toggling stateif (this.hidden !== undefined) {this.$emit('toggle-hidden');} else {this._hidden = !this._hidden;}},},computed: {$hidden() {// Dynamically switch between state or propreturn this.hidden !== undefined? this.hidden: this._hidden;},},};
In the Toggle
component we now have to use the $hidden
computed prop:
<template><div><divclass="title"@click="toggleHidden">{{ title }}</div><slot v-if="$hidden" /></div></template>
You can check out a more detailed tutorial on my blog.
Vue 3.2 gives you fine-grained control over template re-rendering using v-memo
:
<div v-memo="[varA, varB, varC]"><!-- ... --></div>
This works much the same as a computed prop does. An element with v-memo
is only re-rendered when the array changes, but otherwise it caches (or memoizes) the result.
When it's used with v-for
you can selectively re-render only the parts of a list that have changed:
<divv-for="item in list":key="item.id"v-memo="[item.id === selected]"><!-- ... --></div>
Here, we only update the nodes that went selected to unselected, or vice versa. Much faster if you're dealing with extremely long lists!
But since Vue is already so efficient with re-renders, you shouldn't need to use v-memo
very often.
It's definitely a useful tool to help you get more performance â when you really need it.
Check out the docs for v-memo.
It's where I've learned all that I know about Vue.
We're rapidly growing our remote engineering team and we need intermediate and senior devs in Canada and the US.
Our stack is Vue + GraphQL + Rails (with React, Node, and some other things, too).
You'll get to work on tons of diverse and interesting projects. Some of the things I've worked on:
It's also the best place to work (in my opinion):
Apply now and get the best job you've ever had.
Computed props may not work exactly how you think they do.
That's what a lot of us are finding out after reading Thorsten's post on a common misconception around rendering and computed props.
It's not something you'll run into every day, but it's good to know about if you run into performance problems.
Read it here: When a computed property can be the wrong tool
The greatest performance improvement of all is when a system goes from not-working to working. â John Ousterhout
First, get it to work. Then get it to work well. Don't worry about how good the code is until it's working â that's what refactoring is for.
It's so much easier to transform bad code into good code if it's already working correctly.
Unfortunately, Vue.js Amsterdam had to cancel their conference for this October due to COVID, but it's on for February 2022!
Here are some upcoming conferences:
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.
Let's say we have a Button
component that toggles an Accordion
open and closed by changing the variable isOpen
.
But the Button
component changes it's text between "Show" and "Hide" based on the same variable, isOpen
:
// Parent.vue<template><!-- Both components need access to `isOpen` --><Button :is-open="isOpen" @click="toggleOpen" /><Accordion :is-open="isOpen">Some interesting content in here.</Accordion></template>
These two sibling components (because they are beside each other) need access to the same state, so where do we put it?
Answer: The lowest common ancestor!
Which, in this case, is the parent of both components.
Because state only flows down through props, shared state must be in a common ancestor. And we also want to keep state as close as possible, so we put it in the lowest common ancestor.
While this example may seem obvious to some, when the components sharing state are in separate components, in separate folders, it's harder to see that this is the solution.
Note: we also want to co-locate state with the logic that modifies it, so we have to put the toggleOpen
method in the parent as well.
p.s. I also have two courses: Reusable Components and Clean Components