RecycleScroller does not update with items change

[guizoxxv]

Describe the bug

Hello,

On version 2, when items changes, the component does not re-render with the updated lists. Only after a scroll, the updated list is shown.

I tried to debug locally and noticed that the items watcher is not triggered when I add an item to the items array.

Thank you.

Reproduction

Issue on version 2.0.0-beta.8 with Vue 3: https://stackblitz.com/edit/vue-atxauh Normal behaviour on version 1.1.2 with Vue 2: https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-p67jcc

System Info

System:
    OS: Linux 5.15 Linux Mint 21.2 (Victoria)
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
    Memory: 13.16 GB / 15.37 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.160
    Chromium: 121.0.6167.160
  npmPackages:
    @vitejs/plugin-vue: ^5.0.3 => 5.0.4 
    vite: ^5.0.11 => 5.1.1 
    vue: ^3.4.15 => 3.4.18 
    vue-virtual-scroller: ^2.0.0-beta.8 => 2.0.0-beta.8

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[guizoxxv]

Nervermind. I just realized I missed this part in the documentation: "use computed props or watchers to properly react to props changes!".

Thank you.

[knidhi]

@guizoxxv I m also facing this issue after migrating to vue3. How did you solve the issue?

[guizoxxv]

@knidhi

I used a computed property in the RecycleScroller items prop. I copied the array value using the spread operator (shallow copy was enought for me).

computed: {
  list() {
    return [...this.users];
  },
},

Here is a demo: https://stackblitz.com/edit/vue-sq6hfb?file=src%2FApp.vue

[knidhi]

@guizoxxv Thanks for your reply! Shallow copying worked for me too. But the issue you reported seems valid to me. Mutating the users array to propagate updates is what Vue recommends and the newly added user is displaying when we render the list without virtual scroller. We should not have to create a new array like this.

[srackhall]

For addition, it is indeed useful, but for deletion, it does not have an effect (simple views may be effective, as shown in the above figure).

Especially for complex elements (such as nested virtual scrolling), repeated folding may occur. As shown in the above figure, due to the fact that the dom element has not been recycled, when the element is complex, it will still be displayed overlapping in the left view.

Here is a demo: https://stackblitz.com/edit/vue-qpzbjg?file=src%2FApp.vue It can be observed in F12 that the corresponding dom was not immediately correctly reclaimed, thus still causing a bug of view overlap(The elements in the example are relatively simple and cannot be observed from the view).

[srackhall]

I think this issue should be reopened because there is still a possibility of errors during the deletion process (although the probability is very low)