v-if为true为什么不显示，一直显示v-else的内容

Question

如题，代码构成大概如下，打印出来的show.value的值为true，但是就是页面只显示v-else的内容，不显示v-if的。我的头顶后好多问号？？？？

<template>
<div id='a' v-if="show.value">aaaaaaa</div>
<div id='b' v-else>bbbbbbbbb</div>
</template>
<script>
...
setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);
return {
   show
}
}
</script>

Answer 1

<template>
<div id='a' v-if="show">aaaaaaa</div>
<div id='b' v-else>bbbbbbbbb</div>
</template>
<script>
...
setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);

return {show}
}
</script>

Answer 2

可能是因为setup()没有将变量show返回。

setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);
return { show }
}

还有就是如果是通过ref创建的数据, 那么在template中使用的时候不用通过.value来获取，因为Vue会自动给我们添加.value。

Answer 3

setup函数申明的变量需要return出去, 模板才能访问到, 还有使用Ref申明的变量模板内部做了处理不用再.value去获取值