fix(directives): fix memory leak in v-mousewheel directive

[cylgdzz111]

PR Description

🔗 Related Issue

Fixes #[20022]

🤔 Type of Change

• [x] Bug fix (non-breaking change which fixes an issue)

🌟 What's Changed

Fixed memory leak in v-mousewheel directive:

• Added proper cleanup in unmounted hook
• Added handler for directive value updates
• Added TypeScript interface for WheelElement
• Added comprehensive tests

📝 Technical Details

The v-mousewheel directive was not properly cleaning up event listeners, which could lead to memory leaks. This PR:

1. Properly stores and removes event listeners
2. Handles directive value updates correctly
3. Improves type safety with TypeScript interfaces
4. Adds tests to prevent regression

🧪 Testing Done

• Added unit tests for mounting, unmounting, and value updates
• Manually tested with example components
• Verified memory cleanup using Chrome DevTools

📋 Checklist

• [x] I have read the contribution guide
• [x] I have added necessary tests
• [x] I am merging to dev branch
• [x] I have added descriptions and linked to relative issues

[pull-request-triage[bot]]

👋 @cylgdzz111, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions[bot]]

[github-actions[bot]]

Hello @cylgdzz111, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[btea]

Hi, thanks for your contribution.

Could you provide an example with details of the specific problem before and after the modification?

[Liao-js]

it seems to be duplicated with https://github.com/element-plus/element-plus/pull/20121

[cylgdzz111]

Hi, thanks for your contribution.

Could you provide an example with details of the specific problem before and after the modification?

Problem Before Modification

Before the modification, the v-mousewheel directive had a memory leak issue, specifically:

1. Event listeners were not removed when components were unmounted

[cylgdzz111]

[btea]

The screenshots you took seem to use element-ui? Can you provide a link to reproduce it?

[cylgdzz111]

The screenshots you took seem to use element-ui? Can you provide a link to reproduce it?

Sorry, I used the wrong picture Use element-plus official website：https://element-plus.org/zh-CN/component/table.html Switch back and forth between these two tab You will discover a memory leak

[btea]

Can you provide a more accurate, reproducible example through playground?

The memory leak problem mentioned by others before has many influences, such as problems caused by developer tools and memory leaks caused by Vue.

The latest version of Vue has fixed several memory leak issues, but our official website does not use the latest version of Vue.

In the playground, we can switch between different versions of Vue to compare and locate the specific problem. This should give a more accurate result.

[cylgdzz111]

playground

复现地址

第一步：点击切换到表格2按钮 第二步：点击表格任意一点 第三部：点击切换到表格1按钮 重复上述操作，可以观察到内存不断上涨 且不可回收

[btea]

@cylgdzz111 我用测试版本 138.0.7204.23 (Official Build) beta (64-bit) 看起来是能正常降下来的。

[tolking]

LGTM.

指令中的 addEventListener 是需要手动移除，不然是可能存在内存泄露的风险

@cylgdzz111 格式化和测试报错，你有时间处理下吗？

[pkg-pr-new[bot]]

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@20781

commit: 80c29d3

[github-actions[bot]]

🧪 Playground Preview: https://element-plus.run/?pr=20781 Please comment the example via this playground if needed.