$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.

[g8up]

and how to debounce the callback function ?

[DrSensor]

I also encounter a similar situation when I need to watch multiple state change in some component.

  computed: {
    ...mapGetters('bim', [
      'folders',
      'items'
    ]),
    ...mapState('bim', [
      'projects',
      'activeProject'
    ])
  },
  watch: {
    // wait listProjects action to be completed before listing folder
    projects: function (projectObj) {
      this.listFolders()
      this.listItems()
    },
    activeProject: function (projectName) {
      this.listFolders()
      this.listItems()
    }
  },

[SergioCrisostomo]

@sirlancelot very interesting solution! +1

A small suggestion would be to use a Object (new Date();) as return value, since Date.now(); is Number and can give same result if things happens fast.

Buggy example: https://jsfiddle.net/Sergio_fiddle/hdqgyLvx/
Consistent example: https://jsfiddle.net/Sergio_fiddle/hdqgyLvx/1/

[bigsee]

@sirlancelot thanks for a nice solution! +1

[yyx990803]

FYI you can directly watch a getter via $watch without the need for a separate computed property:

this.$watch(vm => [vm.x, vm.y, vm.z].join(), val => {
  // ...
})

https://vuejs.org/v2/api/#vm-watch

[btoo]

i think @sirlancelot and @yyx990803 's solutions pose risks to performance because you have to construct an entirely new object just for the sake of hashing multiple watchers, which is particularly dangerous when you want to hash a large number of watchers together. wouldnt it be safer to define all the watchers in the beginning when the component is constructed? with the spread operator and a simple reducer, this can be done with relatively little clutter (my guess is this is pretty similar to how vuex does it):

watch: {
  ...[
    'key1',
    'key2',
    'key3'
  ].reduce((watchers, key) => ({
    ...watchers,
    [key](newVal, oldVal){
      // ...
    }
  }), {}),
}

it would be nice if a utility function to map watchers were provided too

import { mapWatchers } from 'vue'

allowing for something like this:

watch: {
  ...mapWatchers([
    'key1',
    'key2',
    'key3'
  ], function(newVal, oldVal){
    // ...
  })
}

or even this if we want to provide access to the key, allowing for programmatic generation of watchers:

watch: {
  ...mapWatchers([
    'key1',
    'key2',
    'key3'
  ], key => function(newVal, oldVal){
    // ...
  })
}

[vd3v]

This solution worked pretty well for me and I found it more readable then making a computed properties then watch on them.

Vue.prototype.$watchAll = function(props, callback) {
  props.forEach(prop => {
    this.$watch(prop, callback);
  });
};

and then in any component I can use it, for instance, like this

this.$watchAll(["state.price", "state.amount"], this.onStateChange);

based on @thattomperson suggestion

[guillermovs]

Based on @denwerboy's solution - pass the watched property name to the callback function.
Useful to save changes to localStorage automatically

Vue.prototype.$watchAll = function(props, callback) {
  props.forEach(prop => {
    // Pass the prop as the first argument to our callback
    this.$watch(prop, callback.bind(null, prop));
  });
};

Then call $watchAll on mount and inspect the arguments

this.$watchAll(["field1", "field2"], function(field, value){
  console.log("changed", field, value);
  localStorage.setItem(field, JSON.stringify(value));
});

[matthew-dean]

Ractive solves watching multiple paths with the asterisk, so you could do things like:

this.$watch('*', function() { ... });
this.$watch('root.*', function() { ... });  // passes in individual sub-properties when they change, and not `root`

Seems strange you can't easily define a single callback watcher for multiple properties in Vue.

[Christilut]

I wanted to watch all my data props because I emit them as v-model together in a single object. I ended up going for this:

  mounted () {
    Object.keys(this._data).forEach(key => {
      this.$watch(key, () => {
        this.emit()
      })
    })
  }

[ctf0]

maybe another solution could be

updated() {
    this.$nextTick(() => {
        if (this.first || this.second) {
            this.doSomething()
        }
    })
},

[sirlancelot]

Evan's solution is already the best. Here's my slight adaptation to avoid array construction:

this.$watch(
    (vm) => (vm.x, vm.y, vm.z, Date.now()),
    function () {
        // Executes if `x`, `y`, or `z` have changed.
    }
)

[posva]

This thread seems to have bikeshed a lot while answers have been already provided. Let's stop it here so this doesn't get worse and to prevent spamming around 20 people 😛

See #844 (comment) and #844 (comment) for solutions