Daniel Kelly

Common Mistakes in Vue.js and How to Avoid Them

A common mistake with `reactive()` creates a 'false sense of security' in your app. Learn why Vue expert Daniel Kelly recommends using `ref` as your default.

Common Mistakes in Vue.js and How to Avoid Them
#1about 1 minute

Why learning from common mistakes is practical

Making small mistakes can lead to big headaches, so learning from others' errors is a practical way to improve your own code.

#2about 9 minutes

Avoid using the index as a key in v-for loops

Using an array index as a key in `v-for` can cause unpredictable rendering bugs when the array order changes and child components have their own state.

#3about 5 minutes

Do not rely on non-reactive browser APIs

Computed properties and watchers will not update when depending on non-reactive browser APIs like localStorage or DOM element properties; use libraries like VueUse for reactive wrappers.

#4about 5 minutes

Prefer ref over reactive to avoid breaking reactivity

Reassigning a variable declared with `reactive()` breaks its reactivity, so it's recommended to use `ref()` instead for all data types to prevent subtle bugs.

#5about 6 minutes

Avoid mutating props directly in child components

Directly mutating props, including properties of object props, violates one-way data flow and can be solved by using `defineModel` for `v-model` or cloning the prop into local state.

#6about 2 minutes

Learn more with a free course and certification

A free View School course covers these mistakes and more, including prop drilling and cleaning up event listeners, and a certification is available to validate your skills.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

Lessons learned from building a thriving Vue.js SaaS application30:02

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

10 must-know design patterns for JS Devs28:13

10 must-know design patterns for JS Devs

Erick Wendel

From learning to earning

Jobs that call for the skills explored in this talk.