vue v-show为隐藏的时候内部元素的v-if条件还是会去执行？如何优化这种情况？

Question

<div class="container">
  <div  v-show="currentNum === 1">
      <div  v-if="elJudge(1)">1</div>
      <div  v-else="elJudge(2)">2</div>
  </div>
  <div  v-show="currentNum === 2">
      <div  v-if="elJudge(3)">3</div>
      <div  v-else="elJudge(4)">4</div>
  </div>
  <button type="button" @click="toggle">btn</button>
</div>

类似这样，当currentNum === 1的时候，currentNum === 2中的v-if条件中的函数也会被执行，我觉得这个是没有必要的，如果优化这种情况？

---

有同学提到两层都使用v-if，我这边有想过这个，但是根据项目实际情况我这边不能使用两层v-if，因为v-if会让组件重新实例化，这不是我想要的

Answer 1

两层都用v-if就可以避免这个情况

Answer 2

v-show 元素总是会渲染，只是单纯的隐藏；会一直存在文档流；
换成 v-if

那就给里面的条件再加个判断

 <div  v-show="currentNum === 1">
      <div  v-if="elJudge(1)&&currentNum === 1">1</div>
      <div  v-else="elJudge(2)&&currentNum === 1">2</div>
  </div>

Answer 3

外层v-if 里层v-show

Answer 4

先把v-show换成v-if，然后里面的dom用keep-alive缓存。