From e13895473230bc5913fd3763368e19b0482aab6f Mon Sep 17 00:00:00 2001 From: Claudiu Date: Thu, 3 Apr 2025 19:28:41 +0300 Subject: [PATCH 1/2] docs(guide): Props Stability related to [#13157](https://github.com/vuejs/core/issues/13157) --- src/guide/best-practices/performance.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index eafa30cf29..d21100f51e 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -105,13 +105,15 @@ In Vue, a child component only updates when at least one of its received props h Inside the `` 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** `` in the list has to update! -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 `` directly accept an `active` prop instead: +Ideally, only the items whose active status changed should update. We can achieve that by moving the active status computation into the parent, make `` 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: ```vue-html + :active="item.id === activeId" + v-memo="[item.id === activeId]" +/> ``` 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. From bd68032e428b803eb61e8df8c2f4f9870ced2f9c Mon Sep 17 00:00:00 2001 From: Claudiu Date: Fri, 4 Apr 2025 15:04:58 +0300 Subject: [PATCH 2/2] Update performance.md --- src/guide/best-practices/performance.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index d21100f51e..0fe9eb8f3e 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -100,7 +100,9 @@ In Vue, a child component only updates when at least one of its received props h + :active-id="activeId" + @click="activeId = item.id" +/> ``` Inside the `` 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** `` in the list has to update! @@ -113,6 +115,7 @@ Ideally, only the items whose active status changed should update. We can achiev :id="item.id" :active="item.id === activeId" v-memo="[item.id === activeId]" + @click="activeId = item.id" /> ```