why does the function excute twice in child component?

[zhoufanglu]

Vue version

3.2.25

Link to minimal reproduction

https://codesandbox.io/s/affectionate-snow-p9eu4z?file=/src/App.vue

Steps to reproduce

• index

<template>
  <HelloWorld :msg="msg" />
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  setup() {
    const msg = ref("");
    setTimeout(() => {
      msg.value = "aaaaa";
    }, 1000);
    return {
      msg,
    };
  },
};
</script>

• child

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const fn = () => {
      console.log("xxxxx");// excute twice
    };
    return {
      fn,
    };
  },
};

What is expected?

i think this fn will excute once

What is actually happening?

fn excute twice

System Info

No response

Any additional comments?

No response

[LinusBorg]

Because:

• you call in in the template, so it will run on again every re-render
• the child re-renders once because the msg prop changes.

[zhoufanglu]

Because:

• you call in in the template, so it will run on again every re-render
• the child re-renders once because the msg prop changes.

thank you, I understand, Is computed better for this scenario?

[LinusBorg]

Probably, yes

[zhoufanglu]

Probably, yes
at child component, i think can also this method

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button :disabled="data" ">function</button>
  </div>
</template>
<script>
import { computed } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const fn = () => {
      console.log("function");
    };
    const data = fn();
    return {
      data,
    };
  },
};
</script>

[LinusBorg]

No that won't work.