🔥 (#63) Announcing: Vue Tips Collection 🎉 #

June 2022

Announcing...

🎉 Vue Tips Collection 🎉

A collection of 100+ concise and practical tips on Vue, packaged into a stunning book.

It will be available on June 20th!

(that's only 2.5 weeks from now!)

I've been working hard on this one for a long time, and put my heart and soul into it.

Click here to learn more

...and now we'll return to our regularly scheduled tips.

— Michael

🔥 Structuring Composables #

To keep your composables — those extracted functions written using the composition API — neat and easy to read, here's a way to organize the code.

1. Component and directives
2. provide and inject
3. defineProps, defineEmits, and defineExpose (when using script setup)
4. refs and reactive variables
5. Computed properties
6. Immediate watchers
7. Watchers
8. Lifecycle methods, in their correct order
9. Non-reactive state
10. Methods
11. Async code using await (or Promises if you're into that sort of thing)

Why this order? Because it more or less follows the order of execution of the code.

It's also based on the Vue 3 styleguide.

The await needs to go at the end because most of your logic you'll want to be registered before the setup function returns. Anything after the await will only be executed asynchronously.

🔥 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.

📜 Mark Raw Optimization #

This article takes a deeper look at VueUse's useManualRefHistory, and how we can optimize our non-reactive state when it gets large.

Read it here: Mark Raw Optimization

💬 It always takes longer #

"It always takes longer than you expect, even when you take into account Hofstadter's Law." —Hofstadter's Law

🧠 Spaced-repetition: Directives in Render Functions #

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.

Vue comes with some methods to help you use custom directives on your VNodes:

<script setup>
  import { resolveDirective, withDirectives, h } from "vue";

  // Find the already registered directive by name
  const focusDirective = resolveDirective("focus");

  // Wrap the button with the directive
  const render = () =>
    withDirectives(
      h("button", {}, []),
      // An array of directives to apply
      [[focusDirective]]
    );
</script>

You can find more info on using withDirectives on the docs.

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

来源 #

原文 https://michaelnthiessen.com/weekly-063-june-01/

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