🔥 (#65) My custom PDF tool (with hot reloading) #

June 2022

Heyo!

Only a few days left until Vue Tips Collection launches on Monday, June 20th!

The early access has gone extremely well. All despite me royally screwing it up.

I've also recorded a screencast showing the custom tooling I built to develop and write the book. Check that out here.

I can't wait to drop this on Monday! I still have a bunch of loose ends I'd like to wrap up by then, but I'm more excited than anxious.

At least at this point. Ask me again Sunday night 😂

If you haven't yet, you can check out the book here.

As always, thanks for being a loyal reader!

Here are your tips.

—Michael

🔥 When ref and reactive work the same #

It can be confusing to know whether or not to use ref or reactive.

Here are a few instances where they end up working basically the same.

When using watchEffect dependencies are tracked automatically, so there isn't much difference between ref and reactive:

// Ref — just need to access through `value` property
const refBurger = ref({ lettuce: true });
watchEffect(() => console.log(refBurger.value.lettuce);

// Reactive
const reactiveBurger = reactive({ lettuce: true });
watchEffect(() => console.log(reactiveBurger.lettuce));

Also, because refs are automatically unwrapped in the template, there is no difference there:

<template>
  <!-- Ref -->
  {{ burger.lettuce }}

  <!-- Reactive -->
  {{ burger.lettuce }}
</template>

If you destructure an object you'll need to convert back to refs if you want reactivity:

// Using `ref`
const { lettuce } = toRefs(burger.value);

// Using `reactive`
const { lettuce } = toRefs(burger);

But if you have to convert everything to refs anyway, why not just use them to begin with?

🔥 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 + Astro —Better Than a Vue SPA? #

Astro has a unique approach to dealing with micro-frontend architecture. Worth taking a look at this high-level overview by Anthony.

Read it here: Vue.js + Astro —Better Than a Vue SPA?

💬 Humor #

"Code is like humor. When you have to explain it, it's bad." —Cory House

🧠 Spaced-repetition: Shorthand for named slots #

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.

Named slots also have a shorthand syntax, one that's much nicer to look at.

Instead of writing this:

<DataTable>
  <template v-slot:header>
    <TableHeader />
  </template>
</DataTable>

We can write this:

<DataTable>
  <template #header>
    <TableHeader />
  </template>
</DataTable>

Not a huge difference, but a little cleaner for sure. I think the # character is easier to pick out than v-slot when reading code.

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-065-june-15/

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