v-memo doesn't work with v-for
Version
3.2.0-beta.7
Reproduction link
Steps to reproduce
click inc button
What is expected?
<Item /> should not re-render unless value of count is greater than 4, similar to div above
What is actually happening?
v-memo with v-for doesn't work at all and <Item /> re-renders each time count value is incremented.
What are you actually trying to achieve? Why would you use something that isn't used in the v-for in the v-memo. How are you checking that elements are updated in your current repro?
I don't use it in my project (yet) I was just testing this feature in the playground and noticed it doesn't work with v-for, that's it. Other example. Shouldn't it always render count: 0 within the list? basically act like v-once?
<div v-for="id in 3" :key="id" v-memo="[true]">
count: {{ count }}
</div>
I don't think v-memo is supposed to work like v-once. Since you are passing :count="count", the component still needs to update. Take a look at this example without count, only the items changing are updating, while the rest (9998 elements) are not touched. I'm still confused though as using v-memo or not doesn't change the outcome...
from the docs:
The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped
in my example memo value doesn't change (v-memo="[true]") so why is text updated when the count value changes? :/
you added count back 😆
I'm also confused, this seems like a bug
this seem to be a problem with iterating over a number
v-for="(id, index) in 3"
if you iterate over array the v-memo seem to work
v-for="(id, index) in items"
when the iterator type is Number , it does not pass cache to render function, so the v-memo cache logic is skipped
oh good catch 😂
some what related issue https://github.com/vuejs/vue-next/issues/4253