VueJS is primarily used to build web interfaces and one-page applications. In saying that, it can also be applied to both desktop and mobile app development thanks to the HTML extensions and JS base working in tandem with an Electron framework – making it a heavily favored frontend tool. In this article, I’ll share some Vue js tips that can help you in improving your code performance.

How to watch a slot for changes

Sometimes we need to know when the content inside of a slot has changed:

<!-- Too bad this event doesn't exist -->
<slot @change="update" />

Sadly, Vue has no built-in way for us to detect this. But you can do this in a very clean way by using a mutation observer:

export default {
  mounted() {
    // Call `update` when something changes
    const observer = new MutationObserver(this.update);

    // Watch this component for changes
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

You’ll also need to clean up the observer, you can view more details in this article.

Mix local and global styles together

Generally, when working with styles you want them to be scoped to a single component:

<style scoped>
  .component {
    background: green;
  }
</style>

However, you can also append a non-scoped style block to add in global styles if you need it:

<style>
  /* Applied globally */
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /* Scoped to this specific component */
  .component {
    background: green;
  }
</style>

Be careful though global styles are critical and hard to track down. Sometimes, though, they’re the perfect escape hatch and are exactly what you need.

Easily Destructure in a v-for

Did you know that you can destructure in a v-for?

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

It’s more widely known that you can take the index out of the v-for by using a tuple like this:

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>

When using an object you can also grab the key:

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

It’s also likely to combine these two methods, grabbing the key as well as the index of the property:

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

Shorthand for single scoped slot

Scoped slots are lots of fun, but in order to utilize them, you have to use a lot of template tags, too.
Fortunately, there’s a shorthand that lets us get rid of it, but only if we’re using a single scoped slot.

Instead of writing this:

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

We can write this:

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

Simple, straightforward, and useful.

Validate your forms the easy way by using Vuelidate

Forms are the main way that we get input from the user, and they are absolutely crucial to our applications working well. However, forms are also really tricky to build. On the outside, it seems like they should be fairly straightforward to write. But as you start adding validation rules and other logic, it can quickly turn into a nightmare.

This is where Vuelidate comes in.

Vuelidate is data-model oriented, meaning validation rules are added to a validations object in the component definition, rather than being added directly to input elements in the DOM. It’s a library that makes it super easy to add custom validation and does all the heavy lifting for you.

When to use v-if and when to avoid

Instead of using v-if, it’s sometimes more performant to use v-show instead:

<ComplicatedChart v-show="chartEnabled" />

When v-if is toggled on and off it will create and destroy the element completely. Instead, v-show will create the element and leave it there, hiding it by setting its style to display: none.

Doing this can be much more efficient if the component you’re toggling is expensive to render.
On the other side, if you don’t need that component immediately, use v-if so that it will skip rendering it and load the page just a bit faster.

I hope these tips will benefit you in your vue js development. If you like the blog, Please share your thoughts on Our Social Media Accounts.