Common Mistakes in Vue.js
summary
Demos show concrete bugs and fixes: using index as key breaks component state when an array reorders but a proper stable id fixes the shuffle animation (V Auto animate via a formkit package is used); generating ids with crypto.randomUUID must happen when the array is created, not inside the key; a counter demo proves adding a key forces DOM replacement for transitions; examples contrast ref vs reactive (ref avoids lost reactivity and watcher depth surprises); cloning objects prevents silent prop mutation.
AI-written summary · about
chapters (8)
- 0:00Vue.js mistakes intro
- 2:05Using index as key
- 8:10Keys force DOM rendering
- 9:38Non-reactive browser APIs
- 11:43Replacing reactive arrays
- 17:25Mutating props
- 24:16Summary & recommendations
- 25:01Q&A
related talks
35mCommon Mistakes in Vue.js and How to Avoid Them
25mCommon Mistakes in Vue.js and How to Avoid Them
31mCommon Mistakes in Vue and Nuxt and How to Avoid Them
20mDemystifying the Vue Lifecycle
29mTips & Tricks for your Vue 3 applications
34mConquering Forms in Vue
08mUnderstand the hard parts of Nuxt
37mThe Importance of State Management in Vue