Top 10 Vue.js Best Practices
Swarnendu De
July 10, 2019
Vue.js is a powerful open source JavaScript framework for building interfaces and fully capable of creating single-page applications.
One can create rich applications using this language. You may mix your codes with Vue.js for better efficiency. Due to its lightweight, Vue.js has advantages over frameworks like Angular and React.
Apart from allowing one to write faster, it has outstanding community support, a huge library, and is super convenient to use as Vue.jS is the easiest front end framework out there among the others JavaScript frameworks.
So, what are the Vue.js best practices we like to follow for better results? How exactly does Vue.js work?
1. Use Data Property On Component
This is one of the most important Vue.js best practices.
We should use data property on a component as a function which returns an object rather than data property as a simple object. When the value of data is an object, it’s shared across all instances of a component.
data: {
title: ”
}
Here if you want to use the title property from different places of a component and somewhere you have changed the value of it, it will be reflected all the places of the component as you are using an object and every instance of the component references the same data object, changing the title from one portion will also change the title of every other portion.
You should use data property as a function so that every part of the component gets a different instance of the data property.
data: function () {
return {
title: ”
}
}
2. Use Kebab-Case
If you know how Vue.js works, then then you already know taht you must always try to use kebab-case while writing any custom event name as event names are automatically changed to kebab-case internally if we don’t provide it in kebab-case. Here is an example of data sharing between parent & child component:
Child:
<button v-on:click=“$emit(‘increase-count’, 1)”>
Increment
</button>
Parent html:
<counter
…
v-on:increase-count=“increaseCounter”
></counter>
Parent js:
methods: {
increaseCounter: function (count) {
this.value += count
}
}
Related read: The Unavoidable Desktop Application with Vue JS
3. Rule For Directive
Always use :key attribute with a v-for directive. This attribute is used to check the uniqueness of each of the list items. Vue’s virtual DOM creates VNodes on each of the items of a list. So if there is no key attribute in the list items then Virtual DOM will not identify each of the items separately. So it will be difficult for the virtual DOM to detect any changes for a particular list item.
<div v-for=“item in items” :key=“item.id”>
{{ item.value }}
</div>
4. Rule For Key Attribute
Always use a unique id other than the index of the array for the value of :key attribute. As you know, arrays are mutable and the index of any item can be changed while adding or removing the item from the array.
<div v-for=“item in items” :key=“item.id”>
{{ item.value }}
</div>
5. Rule For V-
Another crucial Vue.js best practice you must follow is the rule for V-. We should not use v-if with v-for as v-for has a higher priority than v-if. See the following example:
<ul>
<li
v-for=“car in cars”
v-if=“car.isActive”
:key=“car.id”
>
{{ car.model }}
</li>
</ul>
In this case, the loop will be iterated over all the items in the list and then it will check the v-if condition. So this is not a good practice.
Instead of this, we can compute the list before rendering so that only active cars will be there to iterate.
<ul>
<li
v-for=“car in activeCars”
v-if=“car.isActive”
:key=“car.id”
>
{{ car.model }}
</li>
</ul>
computed: {
activeCars: function () {
return this.cars.filter(function (car) {
return car.isActive
})
}
}
Related read: Top 10 Best Practices of Angular JS 1.X
6. Use Of Component Properties
It is better to use computed properties rather than using method invocation for any data changes.
Computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.
In comparison, a method invocation will always run the function whenever a re-render happens.
Using computed:
var vm = new Vue({
el: ‘#example’,
data: {
firstName: “John”,
lastName:”Doe”
},
computed: {
setFullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
})
Using methods:
methods: {
setFullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
Related read: Top 10 Laravel Best Practices You Should Follow
7. Use of Multiple V- Condition
Never use multiple v-if condition to render multiple consecutive elements. You can use <div> tag to wrap the elements. But it will give an extra element which doesn’t have anything to do. So you can use <template> tag to wrap the elements.
<template v-if=“true”>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</template>
8. Use Key Property
Use key property if you want to use a reusable element to differentiate between them. Suppose you want to use same element for toggling. If you write something and then toggle to another option the previous text will still be there as you are not using key property to differentiate. If you use key property then it will be blank, and this is how Vue.js works.
if you allow users to toggle between multiple login types:
<template v-if=“loginType === ‘username'”>
<label>Username</label>
<input placeholder=“Enter your username”>
</template>
<template v-else>
<label>Email</label>
<input placeholder=“Enter your email address”>
</template>
Then switching the loginType in the code above will not erase what the user has already entered. Since both templates use the same elements, the <input> is not replaced – just its placeholder.
<template v-if=“loginType === ‘username'”>
<label>Username</label>
<input placeholder=“Enter your username” key=“username-input”>
</template>
<template v-else>
<label>Email</label>
<input placeholder=“Enter your email address” key=“email-input”>
</template>
Now those inputs will be rendered from scratch each time you toggle.
9. Detection Of Changes Within An Array
As you know, there are some limitations in Vuejs that Vue cannot detect changes within an array or object. This is a must follow Vue.js best practice.
Array:
When you directly set an item with the index, e.g. vm.values[index] = newValue
There are three solutions to this:
- Vue.set(vm.values, index, newValue)
- vm.values.splice(index, 1, newValue)
- vm.$set(vm.values, index, newValue)
Object:
var vm = new Vue({
data: {
profile: {
firstName: “John”
}
}
})
Solution for adding a new property:
- Vue.set(vm.profile, ‘lastName’,”Doe”)
- vm.$set(vm.profile, ‘lastName’,”Doe”)
Related read: React Native: Top 10 Best Practices We Follow at Innofied
10. Use of Shorthands
We should always use shorthands for directives or we should never use it. That means we should not mix of using shorthands and the full name of the directives.
Directive shorthands (: for v-bind:, @ for v-on: and # for v-slot) should be used always or never.
Are You Ready To Create Stunning Apps Using Vue.js Best Practices?
Do you know of any Vue.js best practices that we missed out or have a better understanding of Vue.js works that you would like to share with us? Do let us know then, we would love to hear from you!
As partners in application and website development for almost a decade, we understand the trouble and pain businesses go through to get their software developed. As experts in creating unique products that people love and working with startups and entrepreneurs consistently, we will help you launch your product effortlessly.
Are you interested to know more about the advantages of Vue.js? Or create stunning web apps with this framework? If you have an app idea that you would like to share with us, talk to our experts. Contact us here.
