Getting the source of triggering watch

[anteqkois]

I think it's a good idea to have something that helps debug what triggers the watch.

In my case, I have a ref that changes very frequently, and it's hard to track what exactly caused the change.

watch(
  () => isActiveChartPaneAction.value,
  (newIsActiveChartPaneAction) => {
    console.log('IS_ACTIVE_PANE_CHART_ACTION', newIsActiveChartPaneAction);
    // I need to know what triggered this change
  }
);

I could wrap every assignment to the value, but that would require changing the whole codebase where the value is being set, which is not ideal.

Maybe using a proxy-like wrapper could help, something like this:

const myVar = ref(initialValue);

const myVarWrapper = {
  get value() {
    return myVar.value;
  },
  set value(val) {
    console.trace('myVar was changed to', val);
    myVar.value = val;
  },
};

It's a simple idea, but it could improve the developer experience when debugging reactive variables.

[skirtles-code]

That final example can be implemented using a computed with a setter:

const myVar = ref(initialValue)

const myVarWrapper = computed({
  get() {
    return myVar.value
  },
  set(val) {
    console.trace('myVar was changed to', val)
    myVar.value = val
  }
})

Docs: https://vuejs.org/guide/essentials/computed.html#writable-computed

Using a computed will ensure that Vue treats it as a ref.

[Alfred-Skyblue]

Do you need the following functionality?

watch(
  () => isActiveChartPaneAction.value,
  newIsActiveChartPaneAction => {
    console.log('IS_ACTIVE_PANE_CHART_ACTION', newIsActiveChartPaneAction)
  },
  {
    onTrack(e) {
      console.log(e) // DebuggerEvent
    },
    onTrigger(e) {
      console.log(e) // DebuggerEvent
    },
  },
)

According to the official documentation:
https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging

This is also supported in watch.