`v-memo` directive là gì?

v-memo skip re-render một subtree nếu array dependency không thay đổi — tương tự React.memo nhưng ở template level:

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  <!-- Chỉ re-render khi id hoặc selected thay đổi -->
  <ExpensiveComponent :item="item" />
</div>

Dùng cho:

1. Long lists với expensive child renders
2. Chỉ một vài properties ảnh hưởng đến render

Lưu ý: không lạm dụng — dependency array phải đầy đủ, thiếu dependency sẽ gây stale render.

v-memo skips re-rendering a subtree when its dependency array has not changed — similar to React.memo but at the template level:

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  <!-- Only re-renders when id or selected changes -->
  <ExpensiveComponent :item="item" />
</div>

Use for:

1. Long lists with expensive child renders
2. When only a few properties affect rendering

Pitfall: do not overuse — the dependency array must be complete; missing a dependency causes stale renders.