How Not To Vue: 3 Common Vue JS Mistakes That One Should Avoid

VueJS is a very popular JavaScript library for building user interfaces and has been gaining a lot of traction in recent years. I have been using Vue for more than a year and the experience has been fascinating. With that experience, I am sharing 3 very common mistakes that one should avoid while working with Vue JS.

1. Making all the data reactive.

Consider this example where a list of users is rendered at the click of a button. With the click of a button, more data gets pushed into the users array, and the rendered list increases in size.

In this example, we don’t need reactivity for each user-item as we are only displaying users here. Since Vue is deeply reactive by default it also watches for the changes in each user-item by adding setters and getters deeply in each user-item, this process increases the rendering time and memory consumption.

To avoid this, we can use the freeze method of an Object type to make the array immutable which makes the Vue Engine avoid adding setters and getters to the array items.

using Object.freeze() to control reactivity and improve performance

2. Using methods instead of computed

The below component gets re-rendered every second as the index gets incremented.

computed vs methods

Since the computed property gets cached the logic of the computed property will not be run every time the component is rendered, but only when its dependencies(firstName and lastName in this case) change.

The method here runs every time the component is rendered, which will be every second. The image below shows the logs generated by this component over a span of ~1439 seconds.

Avoid calling methods directly in the template in components that get re-rendered frequently.

3. Static properties in data

The previous example has used two static properties in data(firstName and lastName) for simplicity reasons.

Static properties in data should be avoided because VueJS adds a setter and getter deeply(by default) to every property in data to watch the changes. If these properties are not going to be changed in the component’s lifecycle why make the Vue engine watch for changes?

Avoid using properties in data that are not going to be changed in the component’s lifecycle.

So that’s all from my side, if you have any questions then please ask them in the comments, I will be very happy to answer those.