Skip to content

Commit bd68032

Browse files
authored
Update performance.md
1 parent e138954 commit bd68032

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

Diff for: src/guide/best-practices/performance.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ In Vue, a child component only updates when at least one of its received props h
100100
<ListItem
101101
v-for="item in list"
102102
:id="item.id"
103-
:active-id="activeId" />
103+
:active-id="activeId"
104+
@click="activeId = item.id"
105+
/>
104106
```
105107

106108
Inside the `<ListItem>` component, it uses its `id` and `activeId` props to determine whether it is the currently active item. While this works, the problem is that whenever `activeId` changes, **every** `<ListItem>` in the list has to update!
@@ -113,6 +115,7 @@ Ideally, only the items whose active status changed should update. We can achiev
113115
:id="item.id"
114116
:active="item.id === activeId"
115117
v-memo="[item.id === activeId]"
118+
@click="activeId = item.id"
116119
/>
117120
```
118121

0 commit comments

Comments
 (0)