javascript - Prevent running watchEffect function after app mounts in vue 3 - Stack Overflow

admin管理员组

文章数量:1417405

I use the onMounted + watchEffect for some expensive rendering

right now every time the app mounts the watchEffect function runs also

how can I run a function only when the app mounts

and prevent watchEffect run automatically --> only run it after props value changes

// parent

<template>
  <child :data="data" />

  <button type="button" @click="changeData">click to change</button>
</template>

<script>
import Child from "./ponents/child.vue";

export default {
  name: "App",
  ponents: {
    Child,
  },

  data() {
    return {
      data: [1],
    };
  },

  methods: {
    changeData() {
      this.data = [1, 2];
    },
  },
};
</script>

// Child



<template>
  <h1>I have this prop</h1>
</template>

<script>
import { onMounted, ref, watchEffect } from "@vue/runtime-core";

export default {
  name: "Child",
  props: ["data"],

  setup(props) {
    onMounted(() => {

// do this 

      watchEffect(() => {
        // if props.data data changes do this
      });
    });

    return {};
  },
};
</script>

I use the onMounted + watchEffect for some expensive rendering

right now every time the app mounts the watchEffect function runs also

how can I run a function only when the app mounts

and prevent watchEffect run automatically --> only run it after props value changes

// parent

<template>
  <child :data="data" />

  <button type="button" @click="changeData">click to change</button>
</template>

<script>
import Child from "./ponents/child.vue";

export default {
  name: "App",
  ponents: {
    Child,
  },

  data() {
    return {
      data: [1],
    };
  },

  methods: {
    changeData() {
      this.data = [1, 2];
    },
  },
};
</script>

// Child



<template>
  <h1>I have this prop</h1>
</template>

<script>
import { onMounted, ref, watchEffect } from "@vue/runtime-core";

export default {
  name: "Child",
  props: ["data"],

  setup(props) {
    onMounted(() => {

// do this 

      watchEffect(() => {
        // if props.data data changes do this
      });
    });

    return {};
  },
};
</script>

• javascript
• vue-ponent
• vuejs3
• vue-position-api
• vue-reactivity

Share Improve this question Follow edited Dec 7, 2021 at 7:55 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Sep 22, 2021 at 6:34 herbert mühlexherbert mühlex 29111 gold badge44 silver badges1717 bronze badges 1

• watchEffect will fire immediately on setup and also when it’s dependencies change. Therefore if you want to stop the first invocation during setup, use watch instead. – Terry Commented Sep 22, 2021 at 16:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Not sure if I understand your question right, it should run, when the app mounts, but also not when it mounts? Anyway, you can use watchEffect directly in the setup method, why nest it in the onMounted. And if you only want to listen to changes of the props, use just watch instead. watchEffect runs it once when it's mounted and then when any of the used props or refs are changed.

<template>
  <h1>I have this prop</h1>
</template>

<script>
import { onMounted, watch, watchEffect } from "@vue/runtime-core";

export default {
  name: "Child",
  props: ["data"],

  setup(props) {
    onMounted(() => {
      // do stuff once 
    });
    watchEffect(() => {
      // if mounted or if props.data data changes do this
    });
    watch(
      () => props.data,
      (data, prevData) => {
        // if props.data data changes do this
      }
    );

    return {};
  },
};
</script>

One more suggestion added to Thomas answer is to use watchEffect with flush option as post

This will ensure that all your refs are also resolved

https://vuejs/guide/essentials/watchers.html#callback-flush-timing

<template>
  <h1>I have this prop</h1>
</template>

<script>
import { watchEffect, watchPostEffect } from "@vue/runtime-core";

export default {
  name: "Child",
  props: ["data"],

  setup(props) {
    watchEffect(() => {
      // if mounted or if props.data data changes do this
    }, { flush: 'post' });

    // Vue 3.2+
    watchPostEffect(() => {
      // if mounted or if props.data data changes do this
    });

    return {};
  },
};
</script>

本文标签： javascriptPrevent running watchEffect function after app mounts in vue 3Stack Overflow