Neither reactive nor ref feel like a good solution to me. We know that the options API is very approchable by beginners, which makes Vue successful, so as a consequence the Vue team had to deal with a lot of beginners mistakes ; for the options API, it was often a misunderstanding of how the this keyword works. So this has been flagged as a footgun and is avoided as much as possible in Vue 3 RFCs.
Yet I feel like using this in setup would have solve so many trouble, while being much closer to the remaining options API:
this.count=0setTimeout(()=>this.count++,1000)this.errorMessage=nullwatch(count,count=>{if(count>10){this.errorMessage='Larger than 10.'}})
it works exactly like any other component option
no need to return explicitely the bindings, which is something I often forget when using Composition API
no trap like forgetting .value or destructuring reactive objects ; the only trap is when the context changes, but:
it's a language issue, not a Vue issue. It's something the developer will have to learn in JS at some point anyway
arrows functions are awesome, we use them anywhere and they don't rebind this
I believe the difficulty in composing logic while keeping the same execution context is overstated, nothing that can be fixed with a simple .call(this). And again, this is a general JavaScript issue, nothing specific to Vue. Devs will meet the exact same issue on the logic/services parts of their app, if they mix OOP/FP style, which seems to be a current trend.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Neither reactive nor ref feel like a good solution to me. We know that the options API is very approchable by beginners, which makes Vue successful, so as a consequence the Vue team had to deal with a lot of beginners mistakes ; for the options API, it was often a misunderstanding of how the
this
keyword works. Sothis
has been flagged as a footgun and is avoided as much as possible in Vue 3 RFCs.Yet I feel like using
this
insetup
would have solve so many trouble, while being much closer to the remaining options API:.value
or destructuring reactive objects ; the only trap is when the context changes, but:this
I believe the difficulty in composing logic while keeping the same execution context is overstated, nothing that can be fixed with a simple
.call(this)
. And again, this is a general JavaScript issue, nothing specific to Vue. Devs will meet the exact same issue on the logic/services parts of their app, if they mix OOP/FP style, which seems to be a current trend.