v-memo/v-once child components rerendering
Vue version
3.3.0+
Link to minimal reproduction
Steps to reproduce
Click on the update count button. The children components are re-evaluated even when enclosed in a v-memo/v-once tree.
There is an update memo id button to cause the v-memo evaluation to change.
What is expected?
Child components are not re-evaluated unless the memo key has changed.
The count updating should not re-trigger child components to update, the whole subtree should be static.
Only updating the v-memo dependency should trigger re-evaluation of child components.
What is actually happening?
Child component rerendering when using outside state, with v-once and v-memo.
When clicking update count, the children components are re-rendering even when there is a parent v-memo/v-once applied.
System Info
No response
Any additional comments?
No response
The parent does respect the v-memo, it does not update any children.
But since all of the child components that you nested under these v-memos have a reactive dependency on the count ref that the button in the parent changes, they update themselves. You might not be aware that components in Vue can update themselves, and updates do not have to be triggered by the parent?
@LinusBorg thanks for the reply. That makes sense, i think this may be a gotcha that the docs could explore and explain.
It makes sense from Vue perspective to have components update themselves and i see the benefit it brings, however the documentation seems to alude to that it memoizes the vnode tree.
All updates for this
and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.This reads to me that anything in the below tree is memoized, and as such component trees are included. Perhaps we could note some more information on the above to make it clear that child components referencing reactive dependencies will update themselves. Solutions being to pass this state down so the memoization layer is affective.
Only now realized that this is you, Blake - hi! :D
Yeah, I see how this could be read in the way you did. I guess we are too deeply aware that components always work and update independently of one another for us to notice this reading.
The docs team would be happy to add a note I think, over in /vuejs/docs
Hey! 😅 Yes its moi
Ill take a look at doing this tomorrow.