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

组件的字面量prop的监听被意外触发 #10807

Closed
inside5545 opened this issue Apr 26, 2024 · 3 comments
Closed

组件的字面量prop的监听被意外触发 #10807

inside5545 opened this issue Apr 26, 2024 · 3 comments

Comments

@inside5545
Copy link

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v00AQ/SvLXpIon005BSdSU3qAA1TQ414ce5O42GvLu06CLEsckCoBUqkQQgoHBIiWQ5AQXAIk/8ZOyql/gdl1kgZEP267897MvtmZF+Itzyv1AoprWOOGb3kCcSoCr0GY5XiuL1CIfNpGEWr7roMyQM2soO2uZZsLoFTedh1VKnOLMMIMl3GBWqgu07PVHATbATOE5TLUoaKZzYWEIQBF4DPEaB/d1gXN5giLCAMJe5ZD3UBks7l6QzFbpZ5uBxTl6xuVCrAK1UqlAnStnOoGxXAR1PFsKAQ3hLQbxSJKpq/MePwzOZjOXn9Nph+SyeF8+DT58mY+Oo7H384mL+If7+LJ8PTkODk86uvC6KJiMc1PG6x5vusV9TrBYbdb26huFsxaJu0hExG8wFuAtwhuaGWVdS7g9ORjMnkS//oUj5/Pvn/+ffBsVV/ClzySvnHxE9et07qqhPzFtZ/DBSw4DLBtdUr73GWwHGoEBBswY8um/n1PDpITXEMKkZhu227/rooJP6CFZdzoUuPRf+L7fCBjBO/6lFO/RwleYUL3ofkU3nl4jw7gvAId1wxsYF8CPqDctQOpMaU1A2aC7DWeUntH7bHFOnt8ZyAo48umpFDJjBSfYFhrud4XtX4ud7N0U+XBgsIvLi3xr7uQrbMOTEJAmXWnpdtXAMes+23NT3KGHDxl0rbF6K68aUqFBLZqSGePl7fm4hY1pKnSdKMuzShdo15S5lIlSyq/sDCbkVotn4fsKxxmWj11gCP3dLY4I1h66ab526Pk5Wg2eg/WO5sMwxAZKIK/UfzyKkErp2X+XsLoD6uzn9k=

Steps to reproduce

一个组件的propA使用字面量对象形式直接在template中配置,当另一个propB变化,可能会触发propA的监听(如果propA存在函数成员,则会触发)。
现在问题是,如果propA的一个成员的值不是函数,而是一个函数样子的字符串,也会触发,比如:propA="'getXX()'"

What is expected?

:propA="'getXX()'"时,
propA不会因为propB的改变而触发监听

What is actually happening?

:propA="'getXX()'"时,
propA因为propB的改变而触发了监听

System Info

No response

Any additional comments?

No response

@Alfred-Skyblue
Copy link
Member

const b = ref(2)

function render() {
  return h(Child, {
    propA: { hh: 123, d: 'getB()' },
    propB: b.value
  })
}

render()

setTimeout(() => {
  b.value = 3
}, 1000)

After the template is compiled into a render function, calling the render function creates virtual nodes. Since b.value is accessed within the render function, it collects dependencies on b. Therefore, when b.value changes, it triggers an update. However, since propA is declared inside the render function, each execution of the render will create a new { hh: 123, d: 'getB()' }, making this instance of propA different from the previous one. This difference triggers a watch. To avoid this, declare the variable in the script setup. This way, the variable declared in the script setup will be reused in each render, rather than creating a new object each time, thus preventing the triggering of the watch.

playground

@inside5545
Copy link
Author

@Alfred-Skyblue Thanks for your reply!! I know what u mean. A new prop which is declared inside the render function,will be recreated,such as { hh: 123, d: 'getB()' } .However,my doubt is that when propA is declared as {hh:123,d:'getB'},the watch will not be trigger QAQ.
I mean:
{ hh: 123, d: 'getB()' } ➡️ trigger
{ hh: 123, d: 'getB(' } ➡️ trigger
{ hh: 123, d: 'getB' } ➡️ not trigger
I am looking forward to your reply and I will be so appreciate of you 🌸

@Alfred-Skyblue
Copy link
Member

Incorrectly marked as dynamicProp.

image

@Alfred-Skyblue Alfred-Skyblue added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Apr 28, 2024
@yyx990803 yyx990803 added 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Apr 29, 2024
danroux pushed a commit to danroux/sk8l-ui that referenced this issue May 8, 2024
## [3.4.27](vuejs/core@v3.4.26...v3.4.27) (2024-05-06)

### Bug Fixes

* **compat:** include legacy scoped slots ([#10868](vuejs/core#10868)) ([8366126](vuejs/core@8366126)), closes [#8869](vuejs/core#8869)
* **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](vuejs/core#5789)) ([ca7d421](vuejs/core@ca7d421)), closes [#5788](vuejs/core#5788)
* **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](vuejs/core#10846)) ([0e3d617](vuejs/core@0e3d617)), closes [#6568](vuejs/core#6568) [#7434](vuejs/core#7434)
* **compiler-sfc:** handle keyof operator ([#10874](vuejs/core#10874)) ([10d34a5](vuejs/core@10d34a5)), closes [#10871](vuejs/core#10871)
* **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](vuejs/core@f2c1412)), closes [#10786](vuejs/core#10786)

## [3.4.26](vuejs/core@v3.4.25...v3.4.26) (2024-04-29)

### Bug Fixes

* **compiler-core:** fix bail constant for globals ([fefce06](vuejs/core@fefce06))
* **compiler-core:** remove unnecessary constant bail check ([09b4df8](vuejs/core@09b4df8)), closes [#10807](vuejs/core#10807)
* **runtime-core:** attrs should be readonly in functional components ([#10767](vuejs/core#10767)) ([e8fd644](vuejs/core@e8fd644))
* **runtime-core:** ensure slot compiler marker writable ([#10825](vuejs/core#10825)) ([9c2de62](vuejs/core@9c2de62)), closes [#10818](vuejs/core#10818)
* **runtime-core:** properly handle inherit transition during clone VNode ([#10809](vuejs/core#10809)) ([638a79f](vuejs/core@638a79f)), closes [#3716](vuejs/core#3716) [#10497](vuejs/core#10497) [#4091](vuejs/core#4091)
* **Transition:** re-fix [#10620](vuejs/core#10620) ([#10832](vuejs/core#10832)) ([accf839](vuejs/core@accf839)), closes [#10632](vuejs/core#10632) [#10827](vuejs/core#10827)

## [3.4.25](vuejs/core@v3.4.24...v3.4.25) (2024-04-24)

### Bug Fixes

* **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](vuejs/core@4253a57)), closes [#10769](vuejs/core#10769)
* **runtime-core:** properly get keepAlive child ([#10772](vuejs/core#10772)) ([3724693](vuejs/core@3724693)), closes [#10771](vuejs/core#10771)
* **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](vuejs/core@064e82f)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923)

## [3.4.24](vuejs/core@v3.4.23...v3.4.24) (2024-04-22)

### Bug Fixes

* **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](vuejs/core#10706)) ([da7adef](vuejs/core@da7adef)), closes [#10696](vuejs/core#10696)
* **compiler-core:** properly parse await expressions in edge cases ([b92c25f](vuejs/core@b92c25f)), closes [#10754](vuejs/core#10754)
* **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](vuejs/core@5cef52a)), closes [#10726](vuejs/core#10726)
* **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](vuejs/core@f12c81e)), closes [#10743](vuejs/core#10743)
* **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](vuejs/core@1ff4076)), closes [#10725](vuejs/core#10725)
* **deps:** update compiler ([#10760](vuejs/core#10760)) ([15df5c1](vuejs/core@15df5c1))
* **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](vuejs/core#10719)) ([e51ca61](vuejs/core@e51ca61)), closes [#10708](vuejs/core#10708)
* **runtime-core:** further fix slots _ctx check ([cde7f05](vuejs/core@cde7f05)), closes [#10724](vuejs/core#10724)
* **runtime-core:** props should be readonly via direct template access ([b93f264](vuejs/core@b93f264)), closes [#8216](vuejs/core#8216) [#10736](vuejs/core#10736)
* **transition:** transition is breaking/flickering when enter is canceled ([#10688](vuejs/core#10688)) ([65109a7](vuejs/core@65109a7))

## [3.4.23](vuejs/core@v3.4.22...v3.4.23) (2024-04-16)

### Bug Fixes

* **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](vuejs/core@6930e60)), closes [#10710](vuejs/core#10710)
* **runtime-core:** use same internal object mechanism for slots ([6df53d8](vuejs/core@6df53d8)), closes [#10709](vuejs/core#10709)

## [3.4.22](vuejs/core@v3.4.21...v3.4.22) (2024-04-15)

### Bug Fixes

* **compat:** fix $options mutation + adjust private API initialization ([d58d133](vuejs/core@d58d133)), closes [#10626](vuejs/core#10626) [#10636](vuejs/core#10636)
* **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](vuejs/core#10518)) ([e5919d4](vuejs/core@e5919d4)), closes [#10515](vuejs/core#10515)
* **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](vuejs/core@16174da)), closes [#10694](vuejs/core#10694) [#10695](vuejs/core#10695)
* **compiler-core:** fix v-bind shorthand for component :is ([04af950](vuejs/core@04af950)), closes [#10469](vuejs/core#10469) [#10471](vuejs/core#10471)
* **compiler-sfc:** :is() and :where() in compound selectors ([#10522](vuejs/core#10522)) ([660cadc](vuejs/core@660cadc)), closes [#10511](vuejs/core#10511)
* **compiler-sfc:** also search for `.tsx` when type import's extension is omitted  ([#10637](vuejs/core#10637)) ([34106bc](vuejs/core@34106bc)), closes [#10635](vuejs/core#10635)
* **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](vuejs/core#9603)) ([0cef65c](vuejs/core@0cef65c)), closes [#9587](vuejs/core#9587) [#10676](vuejs/core#10676)
* **compiler-sfc:** fix universal selector scope ([#10551](vuejs/core#10551)) ([54a6afa](vuejs/core@54a6afa)), closes [#10548](vuejs/core#10548)
* **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](vuejs/core#10457)) ([e76d743](vuejs/core@e76d743)), closes [#10454](vuejs/core#10454)
* **custom-element:** avoid setting attr to null if it is removed ([#9012](vuejs/core#9012)) ([b49306a](vuejs/core@b49306a)), closes [#9006](vuejs/core#9006) [#10324](vuejs/core#10324)
* **hydration:** properly handle optimized mode during hydrate node ([#10638](vuejs/core#10638)) ([2ec06fd](vuejs/core@2ec06fd)), closes [#10607](vuejs/core#10607)
* **reactivity:** computed should not be detected as true by isProxy ([#10401](vuejs/core#10401)) ([9da34d7](vuejs/core@9da34d7))
* **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](vuejs/core@969c5fb))
* **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](vuejs/core@c3c5dc9)), closes [#10455](vuejs/core#10455) [#10464](vuejs/core#10464)
* **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](vuejs/core#9575)) ([ab59bed](vuejs/core@ab59bed))
* **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](vuejs/core@53d15d3))
* **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](vuejs/core#10599)) ([0dea7f9](vuejs/core@0dea7f9))
* **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](vuejs/core#10576)) ([db374e5](vuejs/core@db374e5))
* **runtime-dom:** fix css v-bind for suspensed components ([#8523](vuejs/core#8523)) ([67722ba](vuejs/core@67722ba)), closes [#8520](vuejs/core#8520)
* **runtime-dom:** force update v-model number with leading 0 ([#10506](vuejs/core#10506)) ([15ffe8f](vuejs/core@15ffe8f)), closes [#10503](vuejs/core#10503) [#10615](vuejs/core#10615)
* **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](vuejs/core#8953)) ([7ccd453](vuejs/core@7ccd453)), closes [#8818](vuejs/core#8818)
* **ssr:** don't render v-if comments in TransitionGroup ([#6732](vuejs/core#6732)) ([5a96267](vuejs/core@5a96267)), closes [#6715](vuejs/core#6715)
* **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](vuejs/core#10632)) ([fc99e4d](vuejs/core@fc99e4d)), closes [#10620](vuejs/core#10620)
* **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](vuejs/core#9421)) ([140a768](vuejs/core@140a768)), closes [#4621](vuejs/core#4621) [#4622](vuejs/core#4622) [#5153](vuejs/core#5153) [#5168](vuejs/core#5168) [#7898](vuejs/core#7898) [#9067](vuejs/core#9067)
* **types:** avoid merging object union types when using withDefaults ([#10596](vuejs/core#10596)) ([37ba93c](vuejs/core@37ba93c)), closes [#10594](vuejs/core#10594)

### Performance Improvements

* add `__NO_SIDE_EFFECTS__` comments ([#9053](vuejs/core#9053)) ([d46df6b](vuejs/core@d46df6b))
* optimize component props/slots internal object checks ([6af733d](vuejs/core@6af733d))
* **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](vuejs/core@4bc9f39))
* **ssr:** optimize setup context creation for ssr in v8 ([ca84316](vuejs/core@ca84316))

## [3.4.21](vuejs/core@v3.4.20...v3.4.21) (2024-02-28)

### Bug Fixes

* **runtime-dom:** avoid unset option's value ([#10416](vuejs/core#10416)) ([b3f8b5a](vuejs/core@b3f8b5a)), closes [#10412](vuejs/core#10412) [#10396](vuejs/core#10396)
* **suspense:** ensure nested suspense patching if in fallback state ([#10417](vuejs/core#10417)) ([7c97778](vuejs/core@7c97778)), closes [#10415](vuejs/core#10415)
* **warning:** stringify args in warn handler ([#10414](vuejs/core#10414)) ([bc37258](vuejs/core@bc37258)), closes [#10409](vuejs/core#10409)

## [3.4.20](vuejs/core@v3.4.19...v3.4.20) (2024-02-26)

### Bug Fixes

* **parser:** should not treat uppercase components as special tags ([e0e0253](vuejs/core@e0e0253)), closes [#10395](vuejs/core#10395)
* **runtime-dom:** avoid always resetting nullish option value ([ff130c4](vuejs/core@ff130c4)), closes [#10396](vuejs/core#10396)
* **runtime-dom:** fix nested v-show priority regression ([364f890](vuejs/core@364f890)), closes [#10338](vuejs/core#10338)
* **runtime-dom:** v-bind style should clear previous css string value ([#10373](vuejs/core#10373)) ([e2d3235](vuejs/core@e2d3235)), closes [#10352](vuejs/core#10352)
* **suspense:** handle suspense switching with nested suspense  ([#10184](vuejs/core#10184)) ([0f3da05](vuejs/core@0f3da05)), closes [#10098](vuejs/core#10098)
* **types:** better typing for direct setup signature of defineComponent ([#10357](vuejs/core#10357)) ([eadce5b](vuejs/core@eadce5b)), closes [#8604](vuejs/core#8604) [#8855](vuejs/core#8855)

## [3.4.19](vuejs/core@v3.4.18...v3.4.19) (2024-02-13)

### Bug Fixes

* **deps:** pin lru-cache to avoid hashing error ([b8be990](vuejs/core@b8be990)), closes [#10300](vuejs/core#10300)
* **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](vuejs/core@995d2fd)), closes [#10317](vuejs/core#10317) [#10325](vuejs/core#10325)
* **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](vuejs/core#10311)) ([e509639](vuejs/core@e509639))

### Features

> Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs.

* **dx:** warn users when computed is self-triggering ([#10299](vuejs/core#10299)) ([f7ba97f](vuejs/core@f7ba97f))

### Performance Improvements

* **runtime:** improve `getType()` GC and speed ([#10327](vuejs/core#10327)) ([603a1e1](vuejs/core@603a1e1))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants