Subscribe on changes!

Keep computeds lazy when passed via slot props

avatar
Jul 26th 2021

Version

3.2.0-beta.5 (but applies basically to ^2 & ^3)

Reproduction link

https://sfc.vuejs.org/

Steps to reproduce

See the reproduction for various cases on how to pass computeds via slot props.

What is expected?

Ideally that all variants in the reproduction keep the computeds lazy until actually used.

What is actually happening?

In the most idiomatic way (EagerUppercase) computeds are evaluated when passed to slot even if they are not used. The other variants also have drawbacks or are not lazy.


  • Its probably not possible to make the EagerUppercase variant lazy by default.
  • The LazyUppercaseThis variant is to be avoided since it passes the whole child component instance. Also there is a warning generated when using this variant: Property "key" was accessed during render but is not defined on instance. at <LazyUppercaseThismsg="foo"> at <App>
  • LazyUppercase works, but requires one to access everything with Ref.value in the template (e.g. uppercase.value)
  • LazyUppercaseReactive would be acceptable, but is not lazy
avatar
Aug 17th 2021

In the case of LazyUppercaseReactive, I've found that to get the effect you want, just change the guardReactiveProps code to look like this. image

I think the reason is object. assign will trigger the getter for the Proxy