Common Mistakes in Vue.js

Let's explore common Vue.js mistakes with simple explanations and before-and-after code examples to help you understand better.

1. Not Following Vue's Reactivity Rules

Mistake: Using non-reactive data sources directly in computed properties.

Before:

import { computed } from 'vue';

const cookiesAccepted = computed(() => {
  return localStorage.getItem('cookieConsent');
});
        

Problem: Changes in localStorage won't automatically update your Vue component because localStorage isn't reactive.

Solution: Wrap localStorage access in a reactive reference and watch for changes to keep your component in sync.

import { ref, watchEffect } from 'vue';

const cookieConsent = ref(localStorage.getItem('cookieConsent'));

watchEffect(() => {
  localStorage.setItem('cookieConsent', cookieConsent.value);
});        

2. Misusing Computed Properties

Mistake: Using methods instead of computed properties for values that depend on reactive data.

Before:

methods: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}        

Problem: The method fullName is recalculated every time it's called, even if firstName and lastName haven't changed.

Solution: Use computed properties to cache the result until dependencies change, improving performance.

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}        

3. Combining v-if and v-for on the Same Element

Mistake: Using v-if and v-for together on the same element.

Before:

<li v-for="item in items" v-if="item.isActive">
  {{ item.name }}
</li>
        

Problem: v-if has a higher priority than v-for, so it doesn't have access to the item in the loop, causing errors.

Solution: Separate v-if and v-for by applying v-if to a child element or use a computed property to filter items before looping.

<li v-for="item in items" :key="item.id">
  <span v-if="item.isActive">{{ item.name }}</span>
</li>        

4. Not Breaking Down Large Components

Mistake: Creating large components instead of breaking them into smaller, reusable ones.

Before:

// A single component handling multiple responsibilities
export default {
  // ...large component code
}
        

Problem: Large components are harder to manage, test, and reuse.

Solution: Break down large components into smaller, focused ones to improve readability and reusability.

// HeaderComponent.vue
export default {
  // ...header-specific code
}

// FooterComponent.vue
export default {
  // ...footer-specific code
}
        

5. Forgetting to Clean Up Side Effects

Mistake: Not cleaning up intervals or event listeners when a component is destroyed.

Before:

mounted() {
  this.interval = setInterval(this.updateData, 1000);
}
        

Problem: The interval continues running even after the component is destroyed, leading to memory leaks.

Solution: Use lifecycle hooks like beforeUnmount to clean up intervals and event listeners.

mounted() {
  this.interval = setInterval(this.updateData, 1000);
},
beforeUnmount() {
  clearInterval(this.interval);
}