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.
#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.
Matching moments
07:48 MIN
Navigating state management patterns and their trade-offs
Lessons learned from building a thriving Vue.js SaaS application
02:13 MIN
Exploring the core technologies behind Vue 3 reactivity
Under The Hood of Vue 3 Reactivity
13:26 MIN
Q&A on framework comparisons and advanced concepts
Securing Frontend Applications with Trusted Types
02:59 MIN
Understanding the core principles of reactivity
Under The Hood Of Vue 3 Reactivity
10:23 MIN
Reframing common complaints about JavaScript development
How to Stop Choosing JavaScript Frameworks and Start Living
04:19 MIN
Answering questions on reactivity and browser support
Under The Hood of Vue 3 Reactivity
01:38 MIN
Deciding when to use or avoid TypeScript in Vue
Vuejs and TypeScript- Working Together like Peanut Butter and Jelly
Dev Digest 136 - No JS(on) of mineNews 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 ...
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025Which 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...
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...
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 ...
From learning to earning
Jobs that call for the skills explored in this talk.
49:00
54:44
30:02
30:40
44:40
15:28
28:43
44:31
