Add watching only final changes, don't trigger on intermediate changes

[silentmantra]

Recently I have been encountered this case frequently that irritates me very:

const model = defineModel({default: []});
const set = reactive(new Set);
watch(model, () => {
  set.clear(); // this causes the second watch to trigger !!!
  model.value.forEach(item => set.add(item));
}, {immediate: true});

watch(set, () =>{
  model.value = [...set];
}, {deep: true});

So as you see the second watch is triggered even the set is the same in the end of the first watch. These unnecessary triggers make my life silly. I could add some boolean variables to skip the mutation or just compare values before the mutation (whether the mutation is needed). But I would prefer some more clean approach like watchFinal or:

watch(() => {
  model.value = [...set];
}, {trigger: 'final'});

[jods4]

What you're asking for is a deep comparison before watch re-executes to identify if its dependencies have truly changed or did an ABA (they changed A -> B, e.g. set.clear(), but then went back to inital state B -> A, e.g. set.add(item)).

Note that watch already performs this check, although:

• it's a shallow test: it looks at set instance, not set contents.
• it's skipped when using { deep: true }, otherwise your watch would never run.
• (source: https://github.com/vuejs/core/blob/main/packages/reactivity/src/watch.ts#L244-L248)

It's a tough thing to ask for a deep check as it requires watch() to keep a deep copy of the dependencies, for the purpose of having something to compare to.
How deep should this copy be? Why stop at one level? What if there are cycles? etc.

In your specific example, I think it would just be more efficient for you to check if set and model.value have the same elements before doing the mutation in your first watch.

[silentmantra]

yes, already doing the comparison for now, thanks for explanation, it makes sense