🔥 (#165) Reassiging and Reactivity

Hey all!

I've been working on an update for Clean Components Toolkit, adding three new patterns to it.

That will bring it up from 18 to a total of 21 — it's about 20% more content than before! I don't yet have a hard timeline on when that will be finished though.

And in case you missed it, last week's episode of Deja Vue was with Marc Backes, who has had a big impact on the Vue community for a long time now.

The episode covers:

How Marc got into coding (and startups!)
A whole bunch of topics around DevRel
Handling legacy code and technical debt

Plus a lot more!

You can watch or listen to the episode here.

I've also got a bunch of great tips for you!

— Michael

Vue Tips Collection 2

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing.

Check out Vue Tips Collection

🔥 Reassigning and Reactivity

Reactive values cannot be reassigned how you might expect:

  const myReactiveArray = reactive([1, 2, 3]);  
      
    watchEffect(() => console.log(myReactiveArray));  
    // "[1, 2, 3]"  
      
    myReactiveArray = [4, 5, 6];  
    // The watcher never fires  
    // We've replaced it with an entirely new, non-reactive object

This is because the reference to the previous object is overwritten by the reference to the new object. We don't keep that reference around anywhere.

Vue developers for years have been tripped up by how reactivity works when reassigning values, especially with objects and arrays:

  // You got a new array, awesome!  
    // ...but does it properly update your app?  
    myReactiveArray = [1, 2, 3];

This was a big issue with Vue 2 because of how the reactivity system worked. Vue 3 has mostly solved this, but we're still dealing with this issue when it comes to reactive versus ref.

The proxy-based reactivity system only works when we access properties on an object.

I'm going to repeat that because it's such an important piece of the reactivity puzzle.

Reassigning values will not trigger the reactivity system. You must modify a property on an existing object.

This also applies to refs, but this is made a little easier because of the standard .value property that each ref has:

  const myReactiveArray = ref([1, 2, 3]);  
      
    watchEffect(() => console.log(myReactiveArray.value));  
    // "[1, 2, 3]"  
      
    myReactiveArray.value = [4, 5, 6];  
    // "[4, 5, 6]"

🔥 UI states to get right

When building a UI, there are many different states that you need to consider:

Normal — Sometimes called the "happy path," this is when things are working as expected. For example, in an email client, you'd show some read emails, some unread emails, and maybe a few that are in the "spam" folder.
Loading — Your UI has to do something while getting the data, right? A couple tricks:
1. Use a computed prop to combine multiple loading states — you don't want spinners all over the page.
2. Wait about 200ms before showing a spinner. If the data loads before that, it feels faster than if you quickly flash the loading spinner on and then off again.
Error — Things will go wrong, and you need to handle that gracefully. Effectively communicating problems to users to help them get unstuck is very tricky (don't make me guess the password requirements!). Hopefully, you have a good UX designer. Empty — What happens when you have no emails to read, have completed all your tasks, or haven't uploaded any videos yet? A chart showing the "Last 30 Days" of data will probably look weird with no data.
Partial Data — Often similar to the empty state, but your big table with filtering and sorting also needs to work with only two rows of data. The list of emails shouldn't break with only one email in it.
Lots of data — Okay, now you have 1294 unread emails. Does your UI break? Maybe that infinite scrolling doesn't make as much sense as when there were only 42 emails.

🔥 Auto-imports in Nuxt 3

In Nuxt 3, instead of importing all of your dependencies like this:

  // Part of my blog  
    import BasicLayout from './BasicLayout.vue';  
    import Footer from '../components/Footer';  
    import Subscribe from '../components/Subscribe';  
    import LandingMat from '../components/LandingMat';  
    import Logo from '../icons/Logo';  
    import LogoClip from '../icons/LogoClip';  
    import TriangleShape from '../icons/TriangleShape';  
    import SquareShape from '../icons/SquareShape';

You import them like this:

  // ...just kidding. No imports needed!

Just use your components, composables, or layouts where you need them, and Nuxt takes care of the rest.

It may seem like a small thing, but auto-imports in Nuxt 3 make the whole developer experience so much nicer. It only imports what you need, when you need it.

This makes your app much faster as well!

Yes, your dependencies are now less explicit. But if you keep your components and composables small enough it shouldn't matter that much. You should still be able to see pretty quickly what's going on in your application.

📜 25 Vue Tips You Need to Know

I've written 58 Vue tips so far this year for you.

That's 2 every week for 29 weeks (since March 22).

I put 25 of them together for you in this one article (which is one of the top Vue posts of all time on DEV.to).

Check it out here: 25 Vue Tips You Need to Know

💬 Comments

"Good code is its own best documentation. As you're about to add a comment, ask yourself, 'How can I improve the code so that this comment isn't needed?'" — Steve McConnell

🧠 Spaced-repetition: Special CSS pseudo-selectors in Vue

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.

If you want some styles to apply specifically to slot content, you can do that with the :slotted pseudo-selector:

  <style scoped>  
      /* Add margin to <p> tags within the slot */  
      :slotted(p) {  
        margin: 15px 5px;  
      }  
    </style>

You can also use :global to have styles apply to global scope, even within the <style scoped> block:

  <style scoped>  
      :global(body) {  
        margin: 0;  
        padding: 0;  
        font-family: sans-serif;  
      }  
    </style>

Of course, if you have lots of global styles you want to add, it's probably easier to just add a second <style> block:

  <style scoped>  
      /* Add margin to <p> tags within the slot */  
      :slotted(p) {  
        margin: 15px 5px;  
      }  
    </style>  
      
    <style>  
      body {  
        margin: 0;  
        padding: 0;  
        font-family: sans-serif;  
      }  
    </style>

Check out the docs for more info.

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components

搜索

聊搜 - 文章聚合搜索