Comments (7)
However, it is reactive when used in a template?
The componentUpdateFn of the component will update the slots and execute the render function when it is re-executed, so the slots in the render function are the updated slots.
from core.
There was a similar issue opened recently, #11227. The description of the problem is different, as is the use case, but I believe the underlying cause is the same: the slots object isn't reactive and is being used outside the rendering of its owner component.
I'm wondering whether the decision to make the slots object non-reactive should be re-evaluated. I think it made sense back in a Vue 2 Options API context, but maybe it isn't such a good fit for where Vue is now?
It feels similar to $refs
and $attrs
. Previously they were just plain objects, but that didn't work well with the Composition API, so they've both been 'replaced' by alternatives that support reactivity, or at least partial reactivity.
I assume the reason it isn't reactive is because of the extra overhead, but is that really significant enough to worry about if it makes slots more difficult to use in more advanced use cases?
I also wonder whether making slots reactive might benefit Vapor mode.
Bit of a tangent, but more generally I wonder whether the current approach of forcing a child to re-render when the props or slots change is actually the best way to go. While I can understand why it was done that way, it is a problem I've hit a few times and it can be really difficult to work around.
Perhaps, rather than always forcing a re-render, it could check whether the relevant job has been added to the scheduler queue and only do the re-render if it has? That approach might already be viable for props, though for slots it would need reactivity adding to the slots object.
from core.
Because instance's slots is not a reactive object, but a normal object
from core.
However, it is reactive when used in a template?
from core.
However, it is reactive when used in a template?
It's not, actually. When the parent changes the number of slots it passes down, it tells that child component "hey, you need to re-render". And during that re-render, triggered by the parent component, not by the slots object, you read the sot object's properties again. That's why they are updated in the template.
from core.
Ok, I'll use onBeforeUpdate to detect slot changes then.
Just wondering, is this worth a feature request?
from core.
closing as a duplicate of #11227 as the root cause is the same.
from core.
Related Issues (20)
- DefineModel not updating the same way as Ref and not showing new data HOT 1
- Inconsistent lifecycle hook and function refs execution order with dynamic components and Suspense
- v-model location matters in realation to event handlers? HOT 2
- expose inside TSX setup function not type safe
- `defineCustomElement` makes props readonly when used with `defineEmits`
- Watcher with getter: trigger depends on combination of reactive dependency and return type HOT 2
- `defineAsyncComponent` onError `retry` function wont reload component HOT 1
- return type of `unref` includes `ShallowRef` if the passed type is `ShallowRef | ComputedRef | MaybeRef`
- anyone wanna fix <select selected disabled> HOT 2
- .
- when I set empty string to include in keepalive , I hope it will never cache any component.But now,it is a bit counter-intuitive HOT 2
- @vue/compiler-sfc remove `~/` when handling the assets in template.
- [@vue/compiler-sfc] Unresolvable type: TSConditionalType
- [@vue/compiler-sfc] Unresolvable type: TSConditionalType
- [@vue/compiler-sfc] Unresolvable type: TSConditionalType
- SSR production mode, ref data binding :style loses responsiveness
- Inconsistent behavior of template refs between development server and production builds HOT 3
- How to use generics in TSX
- provide & inject is not work in one of defineComponent signature `DefineSetupFnComponent ` HOT 1
- [@vue/compiler-sfc] Failed to resolve index type into finite keys
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.