DEV Community

Michael Thiessen
Michael Thiessen

Posted on β€’ Originally published at michaelnthiessen.com

5

πŸ”₯ Vue Tips #24: Mastering Computed Props

This newsletter was sent out to my list on September 1, 2021. Sign up here to get emails like this each week!

They say, "the more the merrier", and I like to be merry*, so here are some more tips.

* I'm sure you enjoy merriment as well.

* Also, not the hobbit.

β€” Michael

πŸ”₯ Master computed props

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 effect
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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.

πŸ”₯ The picture element

The <picture> element lets us provide many image options for the browser, which will then decide what the best choice is:

<picture>
  <!-- You can have as many source tags as you want -->
  <!-- (or none at all!) -->
  <source srcset="big-image.png" media="(min-width: 1024px)">
  <source srcset="bigger-image.png" media="(min-width: 1440px)">
  <source srcset="biggest-image.png" media="(min-width: 2048px)">

  <!-- One img tag is required to actually display the image -->
  <!-- and is used as the default choice -->
  <img src="regular-image.png">
</picture>
Enter fullscreen mode Exit fullscreen mode

You can provide different options based on screen size, resolution, and supported image formats.

The mdn docs have a lot more info on this element.

πŸ”— (Sponsored) Keep on top of new tech with DevTrends.io

It seems that every week there's a new JS framework, or a new and better way to write CSS (which is just the old way again).

Just as you get comfortable writing unit tests you learn that integration tests are actually the way to go. Oh, and the way you've been writing your tests is completely wrong.

Ugh πŸ€¦β€β™‚οΈ

It would be so much simpler if we could ignore everything, but hidden among all these new tools are amazing gems that can transform the way we work.

But keeping up with all of them is impossible.

That's why my long time friend, Anthony Gore (who also created Vue.js Developers), created DevTrends.io

He does all of the research on new tech and tools for you, and then teaches you the most important details in short, informative videos.

Click here to check out some recent videos

πŸ“œ Using Composables Well

React has hooks, Vue has composables. It's a term you maybe haven't heard before, but composables are the functions built using the composition API.

It's not an "official" term, but most of the community has settled on using this term. This is how open source works, right?

In this article, Markus goes through some common patterns for building composables with the composition API.

Read it here: Vue Composition API: Composables

πŸ—ž News: 2 weeks until Nuxt Nation

We have four incredible conferences coming up in the next 3 months, all accessible online and two offering (limited) in-person experiences:

πŸ’¬ 90%

"The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time." β€” Tom Cargill

🧠 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>
Enter fullscreen mode Exit fullscreen mode

We can write this:

<DataTable>
  <template #header>
    <TableHeader />
  </template>
</DataTable>
Enter fullscreen mode Exit fullscreen mode

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.

Exclusive tips and insights every week

Join 8135 other Vue devs and get exclusive tips and insights like these delivered straight to your inbox, every week.

You have great content in your emails. I seriously learn something from every one of them. β€” Titus Decali

Thanks for another beautiful tip πŸ™ β€” Victor Onuoha

Loving these, and the spaced repetition β€” Mark Goldstein

Sign up here

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

nextjs tutorial video

πŸ“Ί Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay