fix: update when the items changes, fix #866

[fncheng]

I noticed that when the items are updated, the corresponding watch is not triggered, which leads to the internal pool not being updated.

[gemini-code-assist]

Hello @fncheng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request addresses issue #866, where updates to the items array in the RecycleScroller component were not triggering the necessary updates in the internal pool. To fix this, I've added a more specific watch on the items property to detect changes in the array's content, in addition to watching the items.length property.

Highlights

• Bug Fix: Addresses an issue where updates to the items array were not triggering updates in the RecycleScroller component.
• Watchers: Implements a more specific watcher on the items property to detect changes in the array's content.

Changelog

• packages/vue-virtual-scroller/src/components/RecycleScroller.vue
  • Added a watcher for the items property to detect changes in the array's content.
  • The watcher checks if the new and old items are different and have the same length before triggering updateVisibleItems.
  • Kept the existing watcher for items.length to handle additions and removals.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

A Vue component's plight,
Data changes out of sight,
Watchers keen and true,
Update the view anew,
Fixing bugs with all our might.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request addresses an issue where updates to the items array in the RecycleScroller component were not triggering the necessary watch, leading to an outdated internal pool. The solution involves adding a separate watch for items.length and a conditional check within the items watch to detect changes in the array's elements. This approach seems reasonable, but let's examine the implementation for potential improvements.

Summary of Findings

• Redundant update trigger: The added condition in the items watcher, newItems.length === oldItems.length, might not be sufficient to cover all scenarios where the items' content changes without affecting the length. Consider using a deep comparison or a more robust method to detect changes in the array's elements.

Merge Readiness

The pull request aims to fix a critical bug related to updating the virtual scroller when the content of items changes. While the added watchers address the issue to some extent, the condition newItems.length === oldItems.length in the items watcher might not be sufficient to cover all scenarios. Therefore, I recommend further investigation and potentially a more robust solution before merging. I am unable to approve this pull request, and recommend that others review and approve this code before merging.

[netlify]

❌ Deploy Preview for vue-virtual-scroller-demo failed.

Name	Link
🔨 Latest commit	bcf7918
🔍 Latest deploy log	https://app.netlify.com/sites/vue-virtual-scroller-demo/deploys/68022af2d4936e0008ae32e2