Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-dom): prevent unnecessary DOM update from v-model #11656

Conversation

Procrustes5
Copy link
Contributor

@Procrustes5 Procrustes5 commented Aug 19, 2024

Description

This PR addresses an issue where the v-model directive for checkboxes was causing unnecessary DOM updates. The fix optimizes the setChecked function to only update the DOM when the checkbox state has actually changed.

Related Issue

close #11647

Proposed Changes

Updated the setChecked function in the vModelCheckbox directive to compare the new calculated state with the current state before updating.
Modified the beforeUpdate hook to only call setChecked if the value has actually changed.
Added new test cases to verify the optimization and ensure no regression in functionality.

@Justineo
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Aug 19, 2024

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools failure failure
nuxt failure success
pinia failure success
primevue failure success
quasar failure success
radix-vue failure success
router failure success
test-utils failure success
vant failure success
vite-plugin-vue failure success
vitepress failure success
vue-i18n failure success
vue-macros failure success
vuetify failure success
vueuse failure success
vue-simple-compiler failure success

Copy link

github-actions bot commented Aug 19, 2024

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 100 kB (+5 B) 37.7 kB (+9 B) 33.9 kB (-59 B)
vue.global.prod.js 159 kB (+5 B) 57.5 kB (+14 B) 51.2 kB (-16 B)

Usages

Name Size Gzip Brotli
createApp 55.1 kB 21.2 kB (+2 B) 19.3 kB
createSSRApp 59.1 kB (+18 B) 22.9 kB (+10 B) 20.8 kB (-2 B)
defineCustomElement 59.8 kB 22.7 kB (+6 B) 20.7 kB (+35 B)
overall 68.8 kB 26.3 kB (+3 B) 23.9 kB (-35 B)

Copy link

pkg-pr-new bot commented Aug 19, 2024

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11656

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11656

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11656

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11656

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11656

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11656

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11656

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11656

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11656

vue

pnpm add https://pkg.pr.new/vue@11656

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11656

commit: 22d4ee5

@Procrustes5 Procrustes5 changed the title fix(v-model): prevent unnecessary DOM update from v-model fix(runtime-dom): prevent unnecessary DOM update from v-model Aug 19, 2024
@Procrustes5
Copy link
Contributor Author

there are failures on ecosystem CI, can someone advise me how to fix it?

}
assign(cloned)
assign(new Set(updatedValue))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change here is not necessary.
We've already cloned the set on line 141

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edison1105
Thank you for review!
Obviously, it was unnecessary, I've fixed it!

@edison1105
Copy link
Member

edison1105 commented Aug 19, 2024

@Procrustes5
That seems not to be related to this PR.
The ecosystem-ci requires pkg-pr-new bot finishes first.

@edison1105
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Aug 19, 2024

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools failure failure
nuxt success success
pinia success success
primevue success success
quasar success success
radix-vue success success
router success success
test-utils success success
vant success success
vite-plugin-vue success success
vitepress success success
vue-i18n success success
vue-macros success success
vuetify success success
vueuse success success
vue-simple-compiler success success

@edison1105 edison1105 added ready to merge The PR is ready to be merged. scope: v-model 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Aug 19, 2024
@Mini-ghost
Copy link
Contributor

I would like to confirm something: If we repeatedly assign the same value to element.checked, would this cause a DOM update?

@Procrustes5
Copy link
Contributor Author

@Mini-ghost
I think el.checked does not trigger the change event, regardless of whether the value changes or remains the same with code below.

if (el.checked !== checked) {
  el.checked = checked
}

@yyx990803 yyx990803 merged commit b1be9bd into vuejs:main Sep 3, 2024
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. ready to merge The PR is ready to be merged. scope: v-model
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unexpected DOM Updates When Wrapping Checkbox in a Vue Component
6 participants