this.$watch(vm => [vm.x, vm.y, vm.z].join(), val => {
// ...
})
Depois de ter escrito a resposta original (em baixo), o criador do Vue.js sugeriu esta maneira (em cima) ainda mais limpa.
Resposta original:
Encontrei uma solução interessante aqui. Na verdade nessa thread há uma ideia de plugin/mixin, mas achei esta sugestão que coloco em baixo bem simples e interessante.
Tendo em conta que o Vue.js regista quais as propriedades acedidas quando um propriedade computed
é chamada podemos confiar no Vue.js para só correr um método/propriedade que seja computed
quando um dos seus valores necessários tiver mudado.
Assim, se tivermos algo como return a, b, c;
num dado computed
o código vai chamar a
, b
e c
e o Vue.js vai registar que esse computed
precisa desses valores. E portanto vai chamar/correr esse computed
quando o setter de um desses valores mudar. Para garantir que podemos usar isso associado a um watch
, basta retornar Date.now()
por exemplo para o valor final desse computed
ser sempre novo/único.
Assim podemos fazer algo como o exemplo abaixo e organizar o código melhor:
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>