watch triggers on unmount for computed properties with undefined instead of the actual value

[posva]

Version

3.0.0-beta.18

Reproduction link

https://jsfiddle.net/82xpeomh/

Steps to reproduce

1. Click on Toggle
2. Look at the list or the console

What is expected?

When toggling the component the watcher should either provide the newest value or not trigger

What is actually happening?

it is providing undefined

---

This happens when the computed needs to be recalculated right when leaving, that's why there is a onBeforeUnmount. From vuejs/router#350

[Jack97]

I've had a quick look at this one and the culprit seems to be in the following lines of code:

https://github.com/vuejs/vue-next/blob/6dd59ee301d8d93e7ca14447243d07a653e69159/packages/runtime-core/src/renderer.ts#L1994-L2003

I commented out the stop effect loop, and the watcher was triggered with the correct new value. I also tried invoking the beforeUnmount hook after the stop effect loop, which stopped the watcher being triggered.

Hope this helps.

[johnsoncodehk]

I think not trigger is the correct way. This is also the way of vue2.

This is an example, in response to the url parameter call api to get the page data, the code in the case of not trigger is:

// not trigger
setup() {
  const data = ref();

  watch(
    () => $route.query.dataId,
    async () => data.value = await fetchData($route.query.dataId),
    { immediate: true },
  )

  return { data };
}

If the trigger last value will require extra code to avoid triggering a useless api calling when leaving the page:

// trigger last value
setup() {
  const data = ref();
  let isOnBeforeUnmount = false;

  watch(
    () => $route.query.dataId,
    async () => {
      if (isOnBeforeUnmount) return; // getCurrentInstance().isUnmounted is false at last trigger
      data.value = await fetchData($route.query.dataId);
    },
    { immediate: true },
  )
  onBeforeUnmount(() => {
    isOnBeforeUnmount = true;
  });

  return { data };
}