Vue dùng :key để identify mỗi vnode khi diff — giúp tái sử dụng và reorder DOM nodes đúng cách thay vì re-render toàn bộ.
- Thiếu key: Vue dùng "in-place patch" — có thể gây lỗi với stateful components hoặc animation
- Dùng index làm key: không nên khi list có thể bị sort/filter — index thay đổi gây re-render sai
- Dùng unique stable ID (e.g.,
item.id) là best practice
Vue uses :key to identify each vnode during diffing — enabling proper DOM node reuse and reordering instead of full re-renders.
- Missing key: Vue uses "in-place patch" — can cause bugs with stateful components or animations
- Using index as key: avoid when list can be sorted/filtered — index changes cause incorrect re-renders
- Use unique stable IDs (e.g.,
item.id) as best practice