I know that custom equality for watch has been brought up few times in the past and the general consensus is that it should just be done inside watch callback. But if one wants to useonCleanup, this approach does not work well:onCleanup of previous run is called even if custom equality determines that nothing should be done.

I have the following use case, where I want to reactivity fetch data from the server if and only if fetch URL changes (slightly abridged):

constdoc=ref<DocType|null>(null)watch([()=>props.params,()=>props.name,()=>props.query],async([params,name,query],[oldParams,oldName,oldQuery],onCleanup)=>{// Do nothing if nothing changed.if(isEqual(params,oldParams)&&isEqual(name,oldName)&&isEqual(query,oldQuery)){return}constabortController=newAbortController()onCleanup(()=>abortController.abort())constnewURL=router.resolve({      name,      params,      query,}).hreftry{constresponse=awaitgetURL(newURL,abortController.signal)if(abortController.signal.aborted){return}doc.value=response.doc}catch(error){if(abortController.signal.aborted){return}console.error(error)return}},{immediate:true,deep:true,},)

The issue is thatparams andquery are objects and even if their contents do not change really, but they are just recreated (e.g., inside a template with something like:query="{id: value}"), the watch triggers. Fine, I do deep comparison withisEqual but the issue is thatonCleanup aborts the previous request even ifisEqual determines that nothing has changed and nothing should be done (so existing in-flight non-aborted-yet fetch should continue to run and finish and update doc ref).

Now, there are few approaches I could take, like doingJSON.stringify on query and params to get a simple string as a reactive value so that existing strict equality would work correctly.

Or I could moveabortController to external-to-the-watch variable and be smart to call it only if params change. But then I also have to call it when any outside scope gets destroyed and I have to keep track of that.

I think the easiest and cleanest and more readable would be if I could provide my own equality function. Something like:

  {    immediate: true,    deep: true,    equals: isEqual  },

Then it would be easy and clear to anyone reading the code, what is the idea here.