Vue.js 3 Quick Tips and Best Practices

Vue.js 3 Quick Tips and Best Practices

With these tips and best practices, you may become a better and more efficient Vue.js developer.

I've been working with Vue for about two years, and I've spent the last year focusing on Vue.js 3. During this time, a great deal of knowledge has been gained.

Script Setup

If you've worked with the composition API previously, you'll note that you always have to perform something like this to get it bootstrapped — you have to do defineComponent and setup():

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Bla',
  setup() {
    // Your bla blas
  }
})
</script>

It's inconvenient to perform this for each component, and you can actually skip completing the component's bootstrapping. You may use the "script setup" block, which is a shortcut for the same thing as indicated above. You don't have to do the manual bootstrapping every time because it's really just syntactic sugar on top: Your component will be simplified using "script setup".

<script lang="ts" setup>
  //Your bla blas
</script>

Reactive CSS

One extremely cool feature of the latest Vue version is that you can bind the CSS directly to your variables. This has shown to be quite beneficial in some of the apps I've developed in the last year.

const color = ref('#f000');<style>
.text {
  color: v-bind(color); 
}
</style>

Boost performance by using v-once or v-memo.

If you care about quick rendering, you might wish to utilize one of Vue's built-in directives like v-once or v-memo to improve your application's rendering efficiency.

v-once

v-once is used when you want to render an element but not have it be reactive, which means it will not appear in future render cycles and is therefore "static." You may use v-once on many items at once, such as ordinary elements, loops, or components.

<template>
  <!-- single -->
  <p v-once>{{ blaProperty }}</p>
  <!-- with children -->
  <div v-once>
    <p>{{ blaProperty }}</p>
  </div>
  <!-- components -->
  <bla-component v-once />
  <!-- v-for directives -->
  <li v-for="item in items" v-once>{{ item }}</li>
</template>

v-memo

In a nutshell, the v-memo is used to memoize a sub-tree of the template — that is, it keeps the results of past renderings to speed up future ones. The v-memo directive may be used to both elements and components. v-memo accepts an array and will only re-render if one of the array's values changes.

<div v-memo="[valueBla, valueSla]">
  ...
</div>

It will be updated if either valueBla or valueSla changes. However, keep in mind that v-memo does not operate within a v-for loop.

Thank you for reading, and I hope you enjoyed the content; if so, please show your appreciation by leaving an emoji or sharing with your friends.

If you want to keep up with me, you can find me on Twitter | LinkedIn or simply visit my website.

  • Yusufcan Yılmaz

Did you find this article valuable?

Support Yusufcan Yılmaz by becoming a sponsor. Any amount is appreciated!