Skip to content

Commit e138954

Browse files
authored
docs(guide): Props Stability
related to [#13157](vuejs/core#13157)
1 parent b70003e commit e138954

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

src/guide/best-practices/performance.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,13 +105,15 @@ In Vue, a child component only updates when at least one of its received props h
105105

106106
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!
107107

108-
Ideally, only the items whose active status changed should update. We can achieve that by moving the active status computation into the parent, and make `<ListItem>` directly accept an `active` prop instead:
108+
Ideally, only the items whose active status changed should update. We can achieve that by moving the active status computation into the parent, make `<ListItem>` directly accept an `active` prop instead and use `v-memo` to conditionally skip the update by checking that every value in the array was the same as last render:
109109

110110
```vue-html
111111
<ListItem
112112
v-for="item in list"
113113
:id="item.id"
114-
:active="item.id === activeId" />
114+
:active="item.id === activeId"
115+
v-memo="[item.id === activeId]"
116+
/>
115117
```
116118

117119
Now, for most components the `active` prop will remain the same when `activeId` changes, so they no longer need to update. In general, the idea is keeping the props passed to child components as stable as possible.

0 commit comments

Comments
 (0)