$watch multiple properties for single callback

[nadirabid]

What do you think about being able to $watch over an array of data properties for a given callback?

$watch(['x', 'y', 'z'], function() { 
  // do something 
});

// or 

$watch('x', 'y', 'z', function() { 
  // do something
});

Not exactly pressing as I can easily make do with multiple $watch statements.

[yyx990803]

I don't think this is an improvement significant enough for further complicating the API, but thanks for the suggestion :)

[devinfd]

I know this is an old request but I've just encountered this "need" and it would be super nice to have. Rather than doing:

$watch('x', function() { 
  this.doSomething(); 
});
$watch('y', function() { 
  this.doSomething(); 
});
$watch('z', function() { 
  this.doSomething(); 
});

[nirazul]

You could easily do something like this:

...
methods: {
    baywatch: function(arr, cb) {
        var self = this;
        arr.forEach(function(val) {
            self.$watch(val, cb.bind(self));
        })
    }
},
...

...and then do: this.baywatch(['a', 'b', 'c'], this.doSomething);.
You could even make a mixin out of it, so you can use it everywhere you want.

[young-steveo]

@nirazul 's solution is good, but you should maybe leave the context binding to the calling code to be more useful as a mixin:

methods : {
    baywatch : function(props, watcher) {
        var iterator = function(prop) {
            this.$watch(prop, watcher);
        };
        props.forEach(iterator, this);
    }
},

//...

this.baywatch(['a', 'b', 'c'], this.doSomething.bind(this));

[devinfd]

Yes this is a viable solution.

[Gubbi]

How can the above be done during extend and not on per instance basis?

[thattomperson]

You could look into making a plugin
http://vuejs.org/guide/plugins.html

I can't write an example at the moment but look at some of the other plugins on that page and see how they add methods to the Vue.prototype

edit:
or just super hacky

var Vue = require('vue')
Vue.prototype.$baywatch = function () {
    var iterator = function(prop) {
        this.$watch(prop, watcher);
    };
    props.forEach(iterator, this);
}

[PeppeL-G]

I was looking for this feature as well.

I have three data variables binded to three input elements in a form, and I need to listen for changes to any of these three data variables and then update a canvas through a third party library. Using watch and pass it an array of data variables that would trigger my single watch function does seem like the simplest solution to me. Does anyone has another solution? I don't want to rely on a plugin/own code modifying Vue for this simple case.

[itsMapleLeaf]

$watch('x', 'y', 'z', function() { 
  // do something
})

This form seems sensible enough to implement. If it's not hard to document, I'm for it.

[sirlancelot]

For this, I would just build a computed property which is derived from your desired properties, then watch that:

const $app = new Vue({
    computed: {
        compoundProperty() {
            // `.join()` because we don't care about the return value.
            return [this.x, this.y, this.z].join()
        }
    },
    watch: {
        compundProperty() {
            // do something
        }
    }
})

UPDATE To skip the performance penalty of allocating and discarding an array, you can comma-separate all the dependent values, and finally return something that will always be different (Date.now() taking from comments below this):

computed: {
    computedProperty() {
        return this.x, this.y, this.z, Date.now();
    }
}

Some linters might complain, but it's perfectly valid JS.

[amirrustam]

@sirlancelot Very nice solution.

Whenever I need a computed property to accomplish this, I append Watchable to the computed property name. So a computed myProperty would become myPropertyWatchable. This is personal convention, and I'm sharing in case someone out there finds it useful.

[fnlctrl]

It can be made simpler to just reference the reactive properties, and then return a value that's guaranteed to be different every time.
This way we avoid a performance overhead of an array operation in the original example by @sirlancelot, though it should be trivial in most cases.
Also, if x, y, z are objects then [this.x, this.y, this.z].join() would give the same result "[object Object],[object Object],[object Object]" every time x/y/z is changed, which prevents the compoundProperty watcher from being fired.

new Vue({
    computed: {
        compoundProperty() {
            // it's only required to reference those properties
            this.x;
            this.y;
            this.z;
            // and then return a different value every time
            return Date.now() // or performance.now()

            // object literals also work but we don't need that overhead
            // return {}
            // return []
        }
    },
    watch: {
        compoundProperty() {
            // do something
        }
    }
})

[simplesmiler]

Here's my two cents.

In 1.x watchers supported expressions, so you could globally mix in a $touch method that would just return Date.now() (or in other way generate unique value), and then define a watcher for $touch(x, y, z), and it would be called every time x, y or z were changed. Demo: https://jsfiddle.net/pdjygyhg/3/

In 2.x you can not just watch an expression, and have to define a computed prop to watch instead. So the best way I can think of is to ease the creation of computed field: https://jsfiddle.net/kmj6Lsae/3/

[ndabAP]

Just wanted to also add my two cents.

I got a situation where I also have to watch for two variables. But as already mentioned: I don't think that if it would be possible natively this would be a significant improvement, too.