v-memo doesn't work with v-for

[sqal]

Version

3.2.0-beta.7

Reproduction link

Vue SFC Playground

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.

[posva]

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?

[sqal]

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>

[posva]

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...

[sqal]

your example is also broken

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? :/

[posva]

you added count back 😆

I'm also confused, this seems like a bug

[lidlanca]

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"

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8YnV0dG9uIEBjbGljaz1cImNvdW50KytcIj5cbiAgICBpbmMge3sgY291bnQgfX1cbiAgPC9idXR0b24+XG4gIFxuXG4gIFxuICA8SXRlbSBcbiAgICAgdi1mb3I9XCIoaWQsIGluZGV4KSBpbiBpdGVtc1wiIDpjb3VudD1cImNvdW50XCIgOmluZGV4PVwiaW5kZXhcIlxuICAgICA6a2V5PVwiaWRcIlxuICAgICB2LW1lbW89XCJbY291bnQgPCAzID8gdHJ1ZSA6IGNvdW50XVwiXG4gICAvPlxuICBcbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZScgXG4gIGltcG9ydCBJdGVtIGZyb20gXCIuL0l0ZW0udnVlXCJcbiAgdmFyIGl0ZW1zID0gWzEsMiwzXVxuICBjb25zdCBjb3VudCA9IHJlZigwKVxuXG48L3NjcmlwdD4iLCJJdGVtLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbjxwcmU+e3twcm9wc319PC9wcmU+XG48L3RlbXBsYXRlPlxuPHNjcmlwdCBzZXR1cD5cblxuICB2YXIgcHJvcHMgPSBkZWZpbmVQcm9wcyhbJ2NvdW50JywnaW5kZXgnXSlcbjwvc2NyaXB0PiJ9

---

https://github.com/vuejs/vue-next/blob/3b64508e3b2d648e346cbf34e1641f4022be61b6/packages/runtime-core/src/helpers/renderList.ts#L67-L75

when the iterator type is Number , it does not pass cache to render function, so the v-memo cache logic is skipped

[sqal]

oh good catch 😂

[lidlanca]

some what related issue #4253