core icon indicating copy to clipboard operation
core copied to clipboard

Published 20 hours ago • verified publisher icon vuejs

fix(vMemo): prevent unexpected render in v-for + v-memo

Open Doctor-wu opened this issue 1 year ago • 15 comments

This PR fixes the unexpected render when v-memo is used in a keyed v-for list. In the past, we just used an array as the renderCache of a list whatever if it is keyed. This PR adds a map that uses nodes.key as key and node as the value to the cache. When updates, if a list is keyed, it will check the cache from the map, so that can prevent unexpected render.

close #10392

Doctor-wu avatar Feb 29 '24 09:02 Doctor-wu

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 100 kB (+230 B) 38 kB (+91 B) 34.3 kB (+81 B)
vue.global.prod.js 158 kB (+385 B) 57.9 kB (+148 B) 51.6 kB (+133 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47.2 kB 18.3 kB 16.8 kB
createApp 55.2 kB 21.3 kB 19.5 kB
createSSRApp 59.3 kB 23.1 kB 21 kB
defineCustomElement 60.1 kB 22.9 kB 20.8 kB
overall 69.1 kB 26.5 kB 24.1 kB

github-actions[bot] avatar Feb 29 '24 09:02 github-actions[bot]

/ecosystem-ci run

baiwusanyu-c avatar Feb 29 '24 09:02 baiwusanyu-c

📝 Ran ecosystem CI: Open

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

vue-bot avatar Feb 29 '24 09:02 vue-bot

@baiwusanyu-c could you help to re-run the ecosystem-ci?

Doctor-wu avatar Feb 29 '24 10:02 Doctor-wu

/ecosystem-ci run

baiwusanyu-c avatar Feb 29 '24 10:02 baiwusanyu-c

📝 Ran ecosystem CI: Open

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

vue-bot avatar Feb 29 '24 11:02 vue-bot

Could you please resolve the conflicts?

edison1105 avatar Oct 16 '24 07:10 edison1105

Could you please resolve the conflicts?

Sure, glad to see this PR finally noticed by others😁

Doctor-wu avatar Oct 16 '24 07:10 Doctor-wu

Open in Stackblitz

@vue/compiler-core

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

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

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

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

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

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

pnpm add https://pkg.pr.new/@vue/runtime-dom@10431
@vue/server-renderer

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

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

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

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

commit: 5167f16

pkg-pr-new[bot] avatar Oct 16 '24 08:10 pkg-pr-new[bot]

I also added corresponding test case

Doctor-wu avatar Oct 16 '24 08:10 Doctor-wu

/ecosystem-ci run

Doctor-wu avatar Oct 16 '24 08:10 Doctor-wu

📝 Ran ecosystem CI: Open

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

vue-bot avatar Oct 16 '24 08:10 vue-bot

language-tools failed seems not related to this PR

Doctor-wu avatar Oct 16 '24 08:10 Doctor-wu

/ecosystem-ci run language-tools

edison1105 avatar Oct 16 '24 13:10 edison1105

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :white_check_mark: success :white_check_mark: success

vue-bot avatar Oct 16 '24 13:10 vue-bot