DEV Community

Discussion on: Thought on Vue 3 Composition API - `reactive()` considered harmful

Collapse
sylvainpolletvillard profile image
Sylvain Pollet-Villard

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 = 0
setTimeout(() => this.count++, 1000)

this.errorMessage = null
watch(count, count => {
  if (count > 10) {
    this.errorMessage= 'Larger than 10.'
  }
})
Enter fullscreen mode Exit fullscreen mode
  • 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.