Dos and Don'ts
Do use keys on v-for; don't mutate props.
Do prefer computed; don't put async side effects in computed.
DO: emit('update:modelValue', next)
DON'T: props.modelValue = nextEmit updates instead of mutating props.
Vue Dos and Don'ts
Do use keys on v-for; don't mutate props. This lesson covers practical patterns, syntax, and mistakes to avoid.
More
Do Pinia for shared state; don't invent event buses first- Handle loading and errors.
- Keep composables tested.
- Prefer TypeScript when you can.
- Measure before optimizing.
Vue Dos and Don'ts Cheatsheet
Quick reference for patterns covered in this lesson.
| Item | Example | Purpose |
|---|---|---|
| Do | script setup | Modern |
| Don't | prop mutate | Bugs |
| Do | keys | Lists |
| Don't | v-if+v-for same node | Quirks |
| Do | storeToRefs | Destructure |
| Don't | v-html unsafe | XSS |
Culture
Choose boring, documented Vue patterns.
Common Mistakes
- Clever reactivity tricks without comments.
- Disabling eslint vue rules globally.
Key Takeaways
- Vue Dos and Don'ts shows up often in Vue apps.
- Practice with a demo.
- Prefer clear APIs.
- Read official docs for edge cases.
Pro Tip
If a pattern needs a long wiki, simplify it.