feat(lazyload): drop Options API to support disabling __VUE_OPTIONS_API__ by Copilot

[yoyo837]

将剩余使用选项式API的组件改为组合式API，以支持在编译时安全的关闭__VUE_OPTIONS_API__

[gemini-code-assist]

Summary of Changes

Hello, 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!

This pull request focuses on modernizing the lazy-image and lazy-component implementations within the vant lazyload package. By transitioning these components from the Options API to the Composition API, the project can benefit from enhanced tree-shaking capabilities during the build process. This refactoring is a step towards optimizing the application's performance and reducing its overall bundle size by allowing the Vue Options API to be safely excluded if not used elsewhere.

Highlights

• Composition API Migration: The lazy-component and lazy-image modules have been refactored from Vue's Options API to the Composition API.
• Compile-time Optimization: This migration enables the safe disabling of the __VUE_OPTIONS_API__ flag during compilation, which can lead to improved bundle size and performance.
• Code Modernization: The changes align these components with modern Vue 3 development practices, improving maintainability and readability.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• packages/vant/src/lazyload/vue-lazyload/lazy-component.js
  • Refactored the component to utilize Vue 3's Composition API.
  • Replaced data properties with ref and reactive for state management.
  • Migrated lifecycle hooks (mounted, beforeUnmount) to onMounted and onBeforeUnmount.
  • Converted component methods (checkInView, load, destroy) into functions within the setup block.
• packages/vant/src/lazyload/vue-lazyload/lazy-image.js
  • Migrated the image lazy-loading component to the Vue 3 Composition API.
  • Replaced data properties with ref and reactive for state management.
  • Converted the watch option to the watch function from Vue's reactivity API.
  • Refactored created, mounted, and beforeUnmount hooks into setup logic, onMounted, and onBeforeUnmount respectively.
  • Moved component methods (init, checkInView, load) into the setup function.

Activity

• No human activity has occurred on this pull request yet.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

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.

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

此 PR 将 lazy-image 和 lazy-component 从选项式 API 重构为了组合式 API。这次重构实现得很好，正确地遵循了组合式 API 的模式。这次迁移是向着能够禁用选项式 API 以获得更好性能和更小打包体积迈出的良好一步。我在 lazy-image.js 中发现一个潜在问题，即每次 src 属性变更时，组件都会被重新添加到 lazy-load 管理器中，这可能导致内存泄漏。我已留下具体的评论和修复建议。总的来说，这次重构工作做得很好。

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.38%. Comparing base (ec5b45b) to head (b4fa230).
⚠️ Report is 232 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13786      +/-   ##
==========================================
- Coverage   89.60%   89.38%   -0.22%     
==========================================
  Files         257      257              
  Lines        7013     6689     -324     
  Branches     1736     1671      -65     
==========================================
- Hits         6284     5979     -305     
+ Misses        384      375       -9     
+ Partials      345      335      -10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

本 PR 将 lazyload 模块中剩余的 Options API 组件迁移到 Composition API，以便在编译时安全关闭 __VUE_OPTIONS_API__，提升与纯 Vue 3 构建配置的兼容性。

Changes:

• 将 LazyImage 从 Options API 改为 defineComponent + setup 实现
• 将 LazyComponent 从 Options API 改为 defineComponent + setup 实现

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/vant/src/lazyload/vue-lazyload/lazy-image.js	LazyImage 组件改为组合式 API，并以 lazyBox 适配 lazy manager 的 listener 接口
packages/vant/src/lazyload/vue-lazyload/lazy-component.js	LazyComponent 组件改为组合式 API，并以 lazyBox 接入 lazy manager

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.