vue3 create multiple listening events or a listening event multiple data sources, which is better performance

[laterdayi]

vue3 create multiple listening events or a listening event multiple data sources, which is better performance

watch(x, newX => {
  console.log(`x is ${newX}`);
});
watch(y, newY => {
  console.log(`y is ${newY}`);
});
watch(z, newZ=> {
  console.log(`z is ${newZ}`);
});

watch([x, y, z], ([newX, newY, newZ]) => {
  console.log(`x is ${newX} and y is ${newY} and y is ${newZ}`);
});

[viniciusteixeiradias]

You would need a very high refresh for the watch to negatively impact performance. But if this is your reality, I performed some tests and the result was that the use of a single event observing several variables is more performant.

I did a relatively large data update, 3 events took a total of 7s, and a single event with multiple variables experienced 2s.

Hope this helps :)