Vue.watch - Watchers for custom objects.

What problem does this feature solve?

More than a problem this is a PoC. I’d like to test if this feature is something wanted or even if it has sense inside Vue ecosystem.

With this proposed API, Vue would have the ability to create watchers over custom objects that aren’t part of a component.

What does the proposed API look like?

The definition of this method would be something like:

Vue.watch(obj: Object, expOrFn: string | Function, cb: any, options?: Object): Function

The usage of this API would be something like:

const state = {
  counter: 0
}

// Use subscriber() to unsubscribe ...
cons subscriber = Vue.watch(state, 'counter', newVal => console.log(`Counter updated ${newVal}`))

state.counter += 1

// Console output: 1

Take into consideration

Current implementation of Watcher

The Watcher object requires a Vue instance. I don’t know if its mandatory for a watcher but I’d like to know if it feasible to decouple the Watcher from the need of an instance. Checking the code I’ve seen the VM is only responsible for storing the watchers and bind itself into the callback functions.

This seems to be a considerable amount of work.

Other thing would be that the passed object would need (Maybe it’s not needed) to store its watchers somewhere. Maybe a private property (__watchers__) inside the current object. Ideas are welcomed.

To be or not be reactive

The object passed to Vue.watch could be reactive or non-reactive. I see 2 options here:

1. Only allow reactive objects using Vue.observable first. With this approach, the initial example won’t work because the state was a plain object.

const state = Vue.observable({
  counter: 0
})

Vue.watch(state, 'counter', newVal => console.log(`Counter updated: ${newVal}`))

state.counter += 1

// Counter updated: 1

1. Vue.watch makes your object reactive, if it isn’t initially. We won’t need to make it observable, because Vue.watch make it reactive for us. This approach will mutate the original object.

Final note

I didn’t make an RFC because I want to check if this feature is useful and feasible before I inspect a bit more in the details of this new API.

If core maintainers think that it will be more suitable in RFCs repository, I’ll write one then.

Any feedback is welcomed.

Thanks.

[yyx990803]

We do plan to expose something like this in v3. There will be an RFC discussing the actual API design, and when it is finalized we will likely introduce it in v2 first.

[sirlancelot]

This is possible now in Vue 2.6.x using the new Vue.observable() helper:

const shared = Vue.observable({ value: "hello" })

const vm = new Vue({
  created() {
    this.$watch(() => shared.value, (value) => {
      console.log("value changed to:", value)
    })
  }
})