why does the function excute twice in child component?
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