Add common mistakes section for:
- Vue 3 refs nested in objects not auto-unwrapped in templates
- Virtual scrolling overscan behavior with small datasets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@ -157,6 +157,45 @@ Element Plus `el-table` (v1) and `el-table-v2` (virtualized) have completely dif
@@ -157,6 +157,45 @@ Element Plus `el-table` (v1) and `el-table-v2` (virtualized) have completely dif
When using new Element Plus components, verify required props - they will cause runtime errors if omitted.
### 4. Vue 3 Template Ref Auto-Unwrap Gotchas
Vue 3 `<script setup>` auto-unwraps refs in templates, but with important limitations:
**TypeScript also fails** when refs are nested in objects - TypeScript sees `virtualizer.visibleRows` as type `ComputedRef | true | VirtualRow[]` instead of `VirtualRow[]`.
**Rule**: Always destructure refs from composable return objects when they will be used directly in templates.
### 5. Virtual Scrolling Overscan with Small Datasets
Virtual scrolling with `overscan` may render ALL rows even when scrolled if:
- Total row heights <viewportheight+(overscan×averagerowheight)
- Dataset is small (e.g., 10 rows with 60px each = 600px total)
With overscan=5 and 10 rows (600px total) and viewport 300px:
- Overscan renders rows -5 to +5 from viewport edge
- This covers all 10 rows regardless of scroll position
This is NOT a bug - it's expected behavior. Virtual scrolling only culls rows when the dataset exceeds viewport + overscan capacity.