Vue Tips

Appearance

Return to top
On this page

🔥 (#64) Deep linking with Vue Router

June 2022

Hello, and welcome to newsletter number 2^6!

I'm working hard on getting the final few pieces in place for the launch of Vue Tips Collection.

June 20th is coming up, and I'm beyond excited to finally get this book into your hands!

Here's a sneak peek at some of the things you'll learn:

  • The one directive that gives you fine-grained control over how your template re-renders —this can have a massive impact on app performance
  • How you can master computed props in 5 minutes by using Side Effect Surgery
  • Discover which of the 6 UI states you keep forgetting about —most devs don’t know all of them
  • 2 new CSS pseudo-selectors that are exclusive to Vue
  • Learn the obscure feature of v-for that (nearly) broke Twitter
  • My dead-simple technique for splitting up large components, even if you have no idea where to start
  • Wield v-model like no one else, by putting multiple on a single component
  • How you can easily implement smooth dragging in less than 50 lines of code — this pattern also works for any mouse movement!
  • Make everything in your app reactive—even the CSS!
  • The easiest way to pass lots of props to a component. This method also works with events!
  • Create real magic with Context-Aware Components. Most devs don’t even realize this is possible!
  • Drastically reduce template complexity by making them Configuration-Driven
  • Learn how to dynamically generate slots —even nesting them recursively!
  • and so much more!

You can check it out here!

—Michael

🔥 Reducing Objects

The reduce function is excellent for converting arrays into objects, but it can be intimidating.

If we have a bunch of items that all have an id:

{
  id,
  //...
}

We can reorganize the array into an object, where the key for each item is the item's id:

const obj = arr.reduce((prev, next) => {
  // Grab the id from the item
  const { id } = next;

  // Add the item to our object
  prev[id] = next;

  // Return the object so we can add more items
  return prev;
}, {});

You get an object that looks like this:

{
  'id1': { id: 'id1', ... },
  'id2': { id: 'id2', ... },
  'id3': { id: 'id3', ... },
}

If you want to group all objects in an array by a specific property, you can do something very similar:

const obj = arr.reduce((prev, next) => {
  // Grab the property from the item that we want to group by
  const { prop } = next;

  // Add a new array to the object if this is the first one
  // with this value
  if (prev[prop] === undefined) {
    prev[prop] = [];
  }

  // Add our item to this array
  prev[prop].push(next);

  // Return the object so we can add more items
  return prev;
}, {});

Our final object looks like this:

{
  'prop1': [
    { prop: 'prop1', ... },
    { prop: 'prop1', ... },
    { prop: 'prop1', ... },
  ],
  'prop2': [
    { prop: 'prop2', ... },
    { prop: 'prop2', ... },
    { prop: 'prop2', ... },
  ],
}

🔥 Deep Linking with Vue Router

You can store (a bit of) state in the URL, allowing you to jump right into a specific state on the page.

For example, you can load a page with a date range filter already selected:

someurl.com/edit?date-range=last-week

This is great for the parts of your app where users may share lots of links, for a server-rendered app, or for communicating more information between two separate apps than a regular link provides typically.

You can store filters, search values, whether a modal is open or closed, or where in a list we've scrolled to — perfect for infinite pagination.

Grabbing the query using vue-router works like this (this will work on most Vue frameworks like Nuxt and Vuepress too):

const dateRange = this.$route.query.dateRange;

To change it we use the RouterLink component and update the query:

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

Here's a demo of this in action:

https://codesandbox.io/s/deep-linking-with-vue-router-vhxkq?file=/src/components/DeepLinking.vue

📜 Suspense: Everything You Need to Know

I wrote this article for VueSchool to clear up some misconceptions I've seen around Suspense.

If you load data in your application, I think you'll find it useful.

There are even some code demos so you can code along with the article!

Read it here: Suspense: Everything You Need to Know

💬 Technical Debt

"The code we release will be imperfect. Not buggy. Imperfect. There’s a difference. We know as a fact that some of what our code does will be wrong; we just don’t know exactly what will be wrong. That’s tech debt." —Allen Holub

🧠 Spaced-repetition: Multi-file single-file components

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.

Here's a little-known feature of SFC.

You can import files just like you would with a regular HTML file:

<!-- A "single" file component -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

This can come in really handy if you need to share styles, docs, or anything else. Also perfect for that super long component file that's wearing out your finger from all the scrolling...

Here's a working demo of it in action: https://codesandbox.io/s/interesting-rosalind-9wwmr?file=/src/components/HelloWorld.vue

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

来源

原文 https://michaelnthiessen.com/weekly-064-june-08/

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