Nesting Vue composables

Viewed 240

I'm working on a codebase that relies heavily on the @vue/composition-api. There are a few places in the code where computed and watch calls are nested. An example:

const refA = ref<number | null>(null);

const refB = ref<number | null>(null);

const onClick = () => {
  refA.value = 5;   
};

watch(refA, (newValue) => {
  if (newValue === null) {
    return;
  }
  
  const {
    result,
  } = useSomeComposable(newValue);
  
  watch(result, (newResultValue) => {
    refB.value = newResultValue;
  });
});

My questions is, if it is a recommended way, or composables should not be nested? Are there any downsides of doing this? E.g. callback not getting cleaned up by the GC because of some refs? Is there an easy way of checking if temporary refs within watch / computed callbacks are still in the memory?

0 Answers
Related