Common Mistakes in Vue.js and How to Avoid Them
summary
Shows concrete bugs and fixes: a Pokemon shuffle demo proves using the index as a v-for key breaks nested component state and shuffling, adding a real unique key fixes it; a ticking counter uses a key to force transitions; replacing a reactive array loses reactivity so examples recommend prefer ref everywhere; computed that reads localStorage doesn’t update unless wrapped (VueUse suggested); mutating object props silently changes parent unless you clone object props; ESLint and Vue devtools catch many issues; survey: 83% find the Vue exam moderate to difficult.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:48Common Vue.js mistakes
- 2:09Index as key in v-for
- 8:15Key attribute beyond v-for
- 10:24Non-reactive computed properties
- 13:12Replacing reactive arrays incorrectly
- 17:44Prefer ref over reactive
- 20:58Mutating component props
- 27:28Course and resources
- 29:55Vue certification value
- 30:57Q&A
related talks
27mCommon Mistakes in Vue.js
25mCommon Mistakes in Vue.js and How to Avoid Them
31mCommon Mistakes in Vue and Nuxt and How to Avoid Them
08mUnderstand the hard parts of Nuxt
29mTips & Tricks for your Vue 3 applications
31mHow to debug Vue Apps
37mThe Importance of State Management in Vue
20mDemystifying the Vue Lifecycle