在 vue 3 中安装应用程序后阻止运行 watchEffect 函数答案

【问题标题】：Prevent running watchEffect function after app mounts in vue 3在 vue 3 中安装应用程序后阻止运行 watchEffect 函数
【发布时间】：2021-11-15 15:06:17
【问题描述】：

我使用onMounted + watchEffect 进行一些昂贵的渲染

现在每次应用挂载时，watchEffect 函数也会运行

如何仅在应用挂载时运行函数

并防止watchEffect自动运行-->只运行它 props 值变化后

// parent

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

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

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

export default {
  name: "App",
  components: {
    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>

【问题讨论】：

watchEffect 将在设置时立即触发，并且在它的依赖项发生更改时也会触发。因此，如果您想在设置期间停止第一次调用，请改用watch。

标签： javascript vue-component vuejs3 vue-composition-api vue-reactivity

【解决方案1】：

添加到 Thomas 答案的另一个建议是使用 watchEffect 和 flush 选项作为 post

这将确保您的所有 refs 也得到解决

https://v3.vuejs.org/guide/reactivity-computed-watchers.html#effect-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>

【讨论】：

【解决方案2】：

不确定我是否正确理解了您的问题，它应该在应用程序挂载时运行，而不是在它挂载时运行？反正你可以直接在setup方法中使用watchEffect，为什么要嵌套在onMounted中。如果您只想听道具的变化，请改用watch。 watchEffect 在挂载时运行一次，然后在任何使用的 props 或 refs 更改时运行。

<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>

【讨论】：