How to trigger watchEffect() before onMount() in vue

Question

My sample:

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

const htmlRef = ref("ref");
const dataRef = ref({});

onMounted(() => {
  console.log("mount");
  // Init with htmlRef
});

watchEffect(() => {
  console.log("effect");
  // Run after dataRef change
});
</script>

<template>
  <div ref="ref"></div>
</template>

I have to integrate an external, pure JS chart with Vue.

In the init step, the library needs access to DOM, so it must be in onMounted(). This does NOT contain the initial render.
Whenever dataRef changes, the chart library needs to receive the whole dataRef and render again. Since watchEffect() runs eagerly, the initial render happens here naturally.

The only problem is that: init must be called before any render. Vue executes watchEffect() before onMounted(), so my code doesn't work at all. Now how should I structure my code?

My current solution:

Duplicate the render code. The initial render happens in onMounted(), and
Add a flag initialRender to skip initial render in watchEffect()

Is this idiomatic Vue? I came from React where marking initial render like this is considered bad practice.

Not sure if your library is tied to your state or just using the DOM, in the second case nextTick might be useful so that it's sure that your DOM has properly been updated before doing anything fancy with your charts. — kissu
– kissu, Commented May 3, 2024 at 10:29

Estus Flask · Accepted Answer · 2024-05-03 08:05:15Z

1

watchEffect triggers immediately, not just before onMounted, this is the expected behaviour.

Either use watch without immediate flag:

watch(dataRef, data => ...)

Or don't use empty object that serves no purpose as initial state to make a clear distinction from an initialized value:

const dataRef = ref(null)
...
watchEffect(() => {
  if (!dataRef.value)
    return
...

answered May 3, 2024 at 8:05

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger watchEffect() before onMount() in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related