Tips & Best Pratices for Vue 3
I’ll share with you some tips and best practices that I have learn working with the latest version of Vue, Vue3.
Speaking of frontend frameworks, I’ve been working with a few I like to explore new ones to learn how they work and how things evolve over time, I’ve spent some time in the past playing and working with Vue, and now the opportunity has arisen to come back and working with the latest Vue 3 version and since then, a lot of learning has been done.
Ref vs Reactive
There are many discussions out there and sometimes it can even become a bit complicated and unclear to know when to use what.
From what I use and found:
When working with primitives, always use ref() (most common: Boolean, String and Number) , while for working with objects, go with reactive().
You want to know more, you can find a deeper explanation about it here: https://medium.com/@bsalwiczek/ref-vs-reactive-in-vue-3-whats-the-right-choice-7c6f7265ce39
Make use of :key in v-for
What will help us always remember to use :key=”” when working with loops in our template (html)
Providing the item key helps Vue if it needs to update components inside the loop. The key is used as an identifier such as an id and of course as it is aware that you must not have duplicate keys.
A key must always be unique, never forget that 🙄
Avoid directly DOM manipulation
When working with Vue, directly DOM manipulation is a no-go.
Instead, use this approach with refs
Bind style directly to state / data
One thing witch has been tricky before is that you couldn’t bind directly to your CSS with your state. And guess what? Now you can with the introduction of Vue 3 and it’s very cool and useful in many cases.
Computed functions
Generally, computed functions in Vue are really good, they are cached based on their reactive dependencies what makes them faster.
Consider this: You are binding one or multiple classes. The classes can change upon some state changing in your application.
Usually, we would do the following on the left side, but on the right side we’ve converted it into a computed function
Async Components
The Async Components can dramatically speed up your application as you don’t pollute your main bundle with code you don’ necessarily need.
The nicer thing about async functions is you load the code when the client needs and keeping your JS bundle to minimum.
You can find a deeper explanation about it here: https://vuejs.org/guide/components/async.html
V-deep to overwrite styles
Sometimes you might find yourself using a third party package or components that have it’s own scoped style.
Ans in that cases u can make use of the functionality of v-deep selector to overwrite those styles.
You can fin a deeper explanation about it here: https://vuejs.org/api/sfc-css-features.html
Thanks for reading and I hope you liked and that this helped to understand better some things about Vue 3.
I’m also still learning about it, but nevertheless is always good to share knowledge with other people.
