Make it possible to teardown a $watch when immediate is set

What problem does this feature solve?

I use the following pattern to wait for a condition to hold:

const unwatch = this.$watch(function () {
  return this.queue.find((element) => element.shown === false);
}, function (newValue, oldValue) {
  if (!newValue) return;

  unwatch();

  // There is an element in the queue with shown === false.
});

The problem is that this pattern is not possible to use if I also want callback to be called if the condition holds already when $watch is called. This is done by setting immediate to true. But then unwatch is not yet set because $watch has not returned.

I could be checking if the condition holds before creating $watch but this makes the code more complicated and in parts duplicated.

What does the proposed API look like?

In Meteor’s Tracker this is solved by providing access to current computation as an argument to the callback function. Maybe Vue could do the same and provide unwatch as the third argument to the callback (newValue, oldValue, unwatch).

[Glandos]

I have to say that I was hit with the same issue. Now my code looks like:

        const condition = () => vxm.isOk(vxm.cameraPaths.paths) && this.sequences.length > 0
        if (condition()) {
          // See https://github.com/vuejs/vue/issues/9501
          this.setNextCameras(true)
        } else {
          const unwatch = this.$watch(condition, (allLoaded, oldLoaded) => {
            this.setNextCameras(allLoaded, oldLoaded, unwatch)
          })
        }

And it’s not really self-explaining on why I must execute the condition manually first. Extending the API of the watch function should not break it, as mentionned.

[mitar]

The implementation is also very easy. Currently there is:

    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
      try {
        cb.call(vm, watcher.value)
      } catch (error) {
        handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
      }
    }
    return function unwatchFn () {
      watcher.teardown()
    }

And in my proposal would be:

    const watcher = new Watcher(vm, expOrFn, cb, options)
    function unwatchFn () {
      watcher.teardown()
    }
    if (options.immediate) {
      try {
        cb.call(vm, watcher.value, undefined, unwatchFn)
      } catch (error) {
        handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
      }
    }
    return unwatchFn

Where is this breaking any API anywhere?