Should non-API static class properties be reactive?

[chrisvfritz]

In a component like this:

class Counter extends Component {
  static count = 0

  count = 0  

  increment() {
    this.count++
    Counter.count++
  }
}

I'm wondering if users might expect Counter.count to be reactive. In this case, the static count might exist to track activity between all instances of the component. The only cases I can think of when users would expect static properties not to be reactive, is when they're part of an API for Vue or a plugin. For example, with vuefire:

static firebase = {
  anArray: db.ref('url/to/my/collection')
}

So this means plugins would be forced to register all the static properties it wants to control, but I think this is actually a good thing. It would allow us to provide explicit warnings in the rare cases when two plugins conflict - or when a plugin tries to use a property that Vue itself has already claimed.

Another caveat is that for templates, which is the only place where these static properties aren't currently available, I think we'd currently have to do something like this:

{{ $options.count }}

But this feels very strange to me, since count isn't really an "option". So at some point, we'll probably get a requested change in scope for templates to:

with ({ [Component.name]: Component }) {
  with (this) {
    // compiled template
  }
}

so that users could access the static count in templates just like in JavaScript, with:

{{ Counter.count }}

That actually sounds like a good idea to me too, making the experience between JSX and templates a little more universal.

And finally, I do want to acknowledge that there is technically a way to achieve the desired behavior:

const globalData = { totalCount = 0 }

class Counter extends Component {
  globalData = globalData   

  Counter = globalData

  increment() {
    this.count++
    globalData.totalCount++
  }
}

but that seems pretty hacky to me. 😅

[yyx990803]

No, definitely not. Shared reactive state should be using the explicit observable API.