refactor(components): [table] remove unnecessary reactivity by vueWorker-x · Pull Request #23254 · element-plus/element-plus

vueWorker-x · 2025-12-30T09:43:11Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

If the MutationObserver class contains private properties marked with '#', using 'ref' will cause an error. Replace it with 'shallowRef' to avoid this error.

Summary by CodeRabbit

Chores
- Simplified the table component’s DOM-observation logic to remove unnecessary reactivity, improving initialization and cleanup reliability and reducing lifecycle overhead.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

pull-request-triage · 2025-12-30T09:43:17Z

👋 @web3Worker-x, 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.

github-actions · 2025-12-30T09:43:19Z

coderabbitai · 2025-12-30T09:43:23Z

📝 Walkthrough

Walkthrough

Replaced a Vue ref-backed MutationObserver holder with a plain MutationObserver variable; removed the ref import. onMounted/onUnmounted usage remains; initialization, observe, and disconnect calls now use the direct variable. No public APIs changed.

Changes

Cohort / File(s)	Summary
MutationObserver usage `packages/components/table/src/table/key-render-helper.ts`	Removed `ref` import and reactive `ref` wrapper; declared `observer: MutationObserver

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I watch the branches, light and hale,

One quiet eye, no heavy tail,
Streamlined hops through tidy code,
A gentle fix along the road 🌿

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description follows the template structure with all checkboxes marked complete, but provides minimal detail about the actual implementation changes made.
Title check	✅ Passed	The title accurately describes the main change: removing unnecessary reactivity (ref) from MutationObserver management in the table component's key-render helper.

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-12-31T02:16:36Z

Open in StackBlitz

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

npm i https://pkg.pr.new/element-plus/element-plus@23254

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 9e557cb

github-actions · 2025-12-31T02:24:35Z

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

rzzf · 2025-12-31T02:49:19Z

I’m not entirely clear about the scenario where this error occurs. Could you provide a simple reproducible example?

Also, I think @webfanzc solution looks good #23257 (comment), What do you think?

vueWorker-x · 2025-12-31T03:00:45Z

I’m not entirely clear about the scenario where this error occurs. Could you provide a simple reproducible example?

Also, I think @webfanzc solution looks good #23257 (comment), What do you think?

Yes, we don't need to use reactive programming here; using regular variables will work better. I'll adjust it to regular variable mode.

…plus into table/useKeyRender

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 415fb14 and cd61f85.

📒 Files selected for processing (1)

packages/components/table/src/table/key-render-helper.ts

🔇 Additional comments (3)

packages/components/table/src/table/key-render-helper.ts (3)

1-1: LGTM: Removed unnecessary ref import.

The removal of ref is appropriate since the observer is now managed as a plain variable, avoiding reactivity overhead and issues with MutationObserver's private properties.

8-18: LGTM: Observer initialization and usage pattern is correct.

The direct initialization and usage of the plain variable properly avoids Vue's reactivity system, which resolves the issue with MutationObserver's private properties. The observer is created and immediately used within the same function scope, ensuring safe access.

25-27: LGTM: Proper cleanup with optional chaining.

The cleanup logic correctly uses optional chaining to safely disconnect the observer, handling cases where the observer might not be initialized.

rzzf · 2025-12-31T03:28:36Z

Could you provide a simple reproducible example?

vueWorker-x · 2025-12-31T03:43:07Z

For example, if the class contains #msg, using ref will result in an error.

example link

rzzf

looks good to me! thank you!

btea · 2025-12-31T09:17:49Z

It seems this problem still exists. 🤔

screenshot

vueWorker-x · 2025-12-31T09:22:23Z

It seems this problem still exists. 🤔

screenshot

Uncomment below and it will work normally without using ref.

webfanzc · 2025-12-31T09:25:31Z

It seems this problem still exists. 🤔

screenshot
Please refer to the description of the PR I submitted: PR #23257 in element-plus/element-plus. This is the root cause of the commit.

github-actions · 2025-12-31T09:27:45Z

@web3Worker-x Thanks for your contribution! ❤️

fix: table/useKeyRender Replace ref with shallowRef

415fb14

pull-request-triage Bot assigned vueWorker-x Dec 30, 2025

pull-request-triage Bot added 1st contribution Their very first contribution Needs Review labels Dec 30, 2025

github-actions Bot added the Contribution::Community label Dec 30, 2025

Merge branch 'dev' into table/useKeyRender

2f3c0dd

rzzf mentioned this pull request Dec 31, 2025

fix: [table] useKeyRender fix MutationObserver private field access #23257

Closed

3 tasks

web3Worker-x added 2 commits December 31, 2025 11:04

fix: table/useKeyRender Replace ref with a regular variable

c9fd146

Merge branch 'table/useKeyRender' of github.com:web3Worker-x/element-…

cd61f85

…plus into table/useKeyRender

coderabbitai Bot reviewed Dec 31, 2025

View reviewed changes

Comment thread packages/components/table/src/table/key-render-helper.ts Outdated

fix: table/useKeyRender Set the observer's default type

6cb1d3e

Merge branch 'dev' into table/useKeyRender

9e557cb

rzzf changed the title ~~fix: table/useKeyRender Replace ref with shallowRef~~ refactor(components): [table] remove unnecessary reactivity Dec 31, 2025

rzzf approved these changes Dec 31, 2025

View reviewed changes

btea approved these changes Dec 31, 2025

View reviewed changes

btea merged commit c40a2c1 into element-plus:dev Dec 31, 2025
17 of 18 checks passed

coderabbitai Bot mentioned this pull request Jan 8, 2026

feat(components): [backtop] target prop support more type #23180

Open

3 tasks

element-bot mentioned this pull request Jan 9, 2026

D2M #23355

Merged

3 tasks

Uh oh!

Conversation

vueWorker-x commented Dec 30, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

pull-request-triage Bot commented Dec 30, 2025

Uh oh!

github-actions Bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new Bot commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rzzf commented Dec 31, 2025

Uh oh!

vueWorker-x commented Dec 31, 2025

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rzzf commented Dec 31, 2025

Uh oh!

vueWorker-x commented Dec 31, 2025

Uh oh!

rzzf left a comment

Choose a reason for hiding this comment

Uh oh!

btea commented Dec 31, 2025

Uh oh!

vueWorker-x commented Dec 31, 2025

Uh oh!

webfanzc commented Dec 31, 2025

Uh oh!

Uh oh!

github-actions Bot commented Dec 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vueWorker-x commented Dec 30, 2025 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Dec 30, 2025 •

edited

Loading

coderabbitai Bot commented Dec 30, 2025 •

edited

Loading

pkg-pr-new Bot commented Dec 31, 2025 •

edited

Loading

github-actions Bot commented Dec 31, 2025 •

edited

Loading