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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Navigating state management patterns and their trade-offs
07:48 MIN

Navigating state management patterns and their trade-offs

Lessons learned from building a thriving Vue.js SaaS application

Exploring the core technologies behind Vue 3 reactivity
02:13 MIN

Exploring the core technologies behind Vue 3 reactivity

Under The Hood of Vue 3 Reactivity

Q&A on framework comparisons and advanced concepts
13:26 MIN

Q&A on framework comparisons and advanced concepts

Securing Frontend Applications with Trusted Types

Understanding the core principles of reactivity
02:59 MIN

Understanding the core principles of reactivity

Under The Hood Of Vue 3 Reactivity

Reframing common complaints about JavaScript development
10:23 MIN

Reframing common complaints about JavaScript development

How to Stop Choosing JavaScript Frameworks and Start Living

Answering questions on reactivity and browser support
04:19 MIN

Answering questions on reactivity and browser support

Under The Hood of Vue 3 Reactivity

Deciding when to use or avoid TypeScript in Vue
01:38 MIN

Deciding when to use or avoid TypeScript in Vue

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Introduction to JavaScript design patterns
04:32 MIN

Introduction to JavaScript design patterns

10 must-know design patterns for JS Devs

Featured Partners

Related Videos

See all videos
Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

Under The Hood of Vue 3 Reactivity49:00

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

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

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

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

petite-vue - Progressively enhancing every application?

Alexander Lichter

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

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

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

André Kovac

Dos and don'ts with react hooks. An opinionated approach20:16

Dos and don'ts with react hooks. An opinionated approach

Daniel Espino Garcia

Related Articles

View all articles
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
LM
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.