Improve Your Vue.js 3 Knowledge

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():

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”.

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.

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.

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.

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 clapping 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yusufcan Yılmaz

Yusufcan Yılmaz

I created my first website at 12 years old. After that I learned how to develop web fronted and now striving to build upon what I know about Frontend.