🔥 (#79) Reactive CSS #

September 2022

🔥 Reactive CSS #

In Vue 3 we can use reactive values in our <style> block just like we can in the <template> block:

<style scoped>
  .button {
    color: v-bind(buttonColor);
  }
</style>

Behind the scenes, Vue uses CSS computed properties (aka CSS variables) scoped to each component.

The CSS remains static, but we can dynamically update the CSS variables whenever the reactive value changes.

More info can be found in the docs.

🔥 What are all these loops for? #

I always forget this, so this tip is mostly for me — hopefully, I won't have to keep looking this up!

We have 3 types of for loops in Javascript:

1. for...in
2. for...of
3. for

But how do you know which one to use?

For iterating through properties of an object, use for...in:

const numbers = {
  one: 1,
  two: 2,
  three: 3,
};

// We get the properties of the object, not the values
for (const number in numbers) {
  console.log(number);
}

// Prints: 'one' 'two' 'three'

Items in a list (also called an iterable object) like an Array or Set, we use for...of:

const numbers = ["one", "two", "three"];

// We get each of the elements in the Array
for (const number of numbers) {
  console.log(number);
}

// Prints: 'one' 'two' 'three'

You can use for...in with an Array since all the indices are just the object's properties. But you may not get them in the correct order, and you'll also get any other properties the Array has 😕

And you know how to use a regular old for loop, which lets you have a lot more control with some extra typing.

📜 Vue.js Performance Guide #

MadeWithVueJS has put together a great performance guide for Vue.js.

It doesn't cover how to do everything, but offers a detailed checklist of things you should be considering for your application.

The guide also includes tons of resources and tools to go deeper into performance optimization.

Read it here: Vue.js Performance Guide

💬 Unhappy #

"You're bound to be unhappy if you optimize everything." —Donald Knuth

🧠 Spaced-repetition: Configurable Composables #

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.

The key to highly reusable composables is making them configurable.

To do this we can pass in an options object as the last parameter of the composable:

const count = useCount(4, { incrementBy: 2 });

This way, we can use the composable in it’s default configuration:

const count = useCount(4);

While still being able to access the custom behaviour if we need it.

This is how we might implement this in a composable:

export function useCount(count, opts) {
  const { incrementBy } = opts;
  // ...
}

We take our options object and destructure any values that we need out of it.

Because we are using an object for this configuration, it’s very easy to add in additional properties in the future:

export function useCount(count, opts) {
  const { incrementBy, decrementBy } = opts;
  // ...
}

And because we don’t have to worry about the order of parameters when things are inside an object, we don’t break existing code!

p.s. I also have three courses: Vue Tips Collection, Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-079-september-21/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。