When I need to react to changes in N properties for the same callback I give myself to use something like this:
watch: {
propriedadeA(){
this.reagir();
},
propriedadeB(){
this.reagir();
},
propriedadeC(){
this.reagir();
}
}
Is there a way to be more DRY in this approach?
this.$watch(vm => [vm.x, vm.y, vm.z].join(), val => {
// ...
})
Having written the original response (below), the creator of Vue.js suggested this way (on top) even cleaner.
Original answer:
I found a interesting solution here . In fact in this thread there is a idea of plugin / mixin, but I found this suggestion that I put down very simple and interesting.
Given that Vue.js records what properties are accessed when a computed property is called, we can rely on Vue.js to only run a method / property that is computed when one of its required values has changed .
So if we have something like return a, b, c; in a given computed the code will call a , b and c and Vue.js will record that computed needs those values. And so it will call / run this computed when the setter of one of these values changes. To ensure that we can use this associated with a watch , just return Date.now() for example for the final value of that computed to be always new / unique.
So we can do something like the example below and organize the code better:
new Vue({
el: "#app",
data() {
return {
mudancaConstante: 0,
valorA: 0,
valorB: 100,
valorC: "constante",
contadorABC: 0
};
},
created() {
setInterval(() => this.mudancaConstante++, 250);
setInterval(() => this.valorA++, 2500);
setInterval(() => this.valorB++, 1500);
},
// a parte interessante é daqui para baixo
computed: {
observadorABC() {
return this.valorA, this.valorB, this.valorC, new Date();
}
},
watch: {
observadorABC() {
this.contadorABC++;
}
}
});<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<p>this.mudancaConstante: {{mudancaConstante}}</p>
<p>this.contadorABC: {{contadorABC}}</p>
</div>