Odd behavior with useTemplateRef and watchEffect/watch

[vincerubinetti]

This isn't really a bug as far as I understand it, but I wanted to make a post about it for discussion in case anyone (including my future self) ran into it.

Consider the following reduced test case:

<template>
  <button @click="dataset = datasetA">use dataset A</button>
  <button @click="dataset = datasetB">use dataset B</button>
  <br /><br />
  dataset raw: {{ dataset.join(",") }}<br />
  dataset items:
  <span v-for="(item, key) of dataset" :key="key" ref="items">
    {{ item }}
  </span>
</template>

<script setup lang="ts">
import { nextTick, ref, useTemplateRef, watch, watchEffect } from "vue";

const datasetA = ["a", "b", "c"];
const datasetB = ["a", "b", "c", "d", "e", "f"];
const dataset = ref<string[]>([]);

const items = useTemplateRef("items");

watch([dataset, items], async () => {
  // await nextTick();
  console.log("watch", dataset.value.length, items.value?.length);
});

watchEffect(async () => {
  // console.log("watchEffect, sync", dataset.value.length, items.value?.length);
  // await nextTick();
  console.log("watchEffect, async", dataset.value.length, items.value?.length);
});
</script>

The console logs won't log the expected array lengths. (But the arrays rendered in the <template> will).

The first key is to recognize that while the useTemplateRef is reactive, it doesn't get updated with the correct/expected value until the new DOM elements associated with it are actually mounted: https://stackoverflow.com/questions/79031309/usetemplateref-is-not-reactive-for-arrays Meaning, anything tracking the ref will get called, but right before the value is updated to the expected value, not after as I would've expected. I guess this is because it's a shallow ref, not a deep one? And I guess they made it shallow as a prudent design decision to avoid infinite renders or something like that? If someone more knowledgeable could explain this in a less hand-wavy way, it would be appreciated.

So you have to await nextTick() to get the expected value. But that introduces another odd problem when using watchEffect. Regular watch works fine because you're manually providing the dependencies, but apparently watchEffect cannot auto-track dependencies that are used asynchronously within the function:
#2093 In my example above, if you un-comment the console.log("watchEffect, sync", it will work as expected, but not if it's commented out and are thus only using the dependencies after the await.

[skirtles-code]

I think when the decision was made to make useTemplateRef a shallowRef, the array case was overlooked. A shallowRef makes sense for a single component instance or element, but not for an array. I believe this is the problem that #12733 attempts to solve, making the array itself a shallowReactive:

• Playground - PR 12733

In that Playground you'll see the watchers get triggered twice, once for the change to dataset and then again for items.

By default, watchers are flush: 'pre', so they run prior to rendering updates. If you add { flush: 'post' } then you'll see the correct length for items, even without the changes in 12733:

• Playground - flush: 'post'

So with flush: 'pre' the order of events is:

1. dataset changes.
2. Watchers called.
3. Rendering.
4. items updated.
5. Watchers aren't called again because the array itself isn't actually reactive (with PR 12733 that array is reactive, so the watchers get called again here).

With flush: 'post' the order is:

1. dataset changes.
2. Rendering.
3. items updated.
4. Watchers called. This was triggered by dataset changing, not items, but the watcher callback still sees the updated values for both.

[vincerubinetti]

This is super insightful, thank you.

I had tried changing the flush option but it hadn't worked for me, but that was in my actual code and not the reduced example, so I might've been doing something wrong or there might've been confounding factors.

Watchers called. This was triggered by dataset changing, not items, but the watcher callback still sees the updated values for both.

In my actual use case, I need to use both dataset and items in the watcher, so this is okay. And I suppose technically being reactive to dataset changing should be "good enough" for anyone, because the length of items is derived from/dependent on the length of dataset. Still though, if someone only needs to use items in their watcher, they should be able to specify just that, and not a spurious dataset.

To clarify, the Vue team is intending to merge that PR? I.e. the team agrees the non-reactive array was a mistake and there's no strong objections to fixing it in a patch/minor? Just want to know if I can expect a future version to behave differently.

[skirtles-code]

To clarify, the Vue team is intending to merge that PR? I.e. the team agrees the non-reactive array was a mistake and there's no strong objections to fixing it in a patch/minor? Just want to know if I can expect a future version to behave differently.

The PR was created by a member of the Vue team, but that doesn't necessarily mean that other members of the team will agree with the suggested fix. So far it doesn't seem that anyone has expressed any reservations about merging that PR.

[vincerubinetti]

Understood, I guess I'll keep an eye on it and update this thread if it's merged. Please also do the same if able.