vue条件渲染使用场景（v-if VS v-show）

一、写在前面
今天字节一面，问了一个问题，关于vue的v-if和v-else之间的区别，此时我比巴拉巴拉说了一会，接着面试官又问道什么时候必须使用v-if，我实在不知道，下面我将彻底对v-if和v-else进行总结。
二、具体
v-if的值为布尔值，当为true的时候，是渲染到dom中的，当不为true的时候，在页面中完全不渲染。
v-show的值也是布尔值，也渲染到页面中的，类似于css中的display: false。
存在一些场景必须要使用v-if，也存在一些场景v-show。
下面我来总结一下哪种情况必须使用v-if：

我们现在想一个场景，就是当我们使用循环组件的时候，如下所示:
<template>
  <div :class="[!notFirst && 'tree']">
    <Tree v-if="length > 0" :length="length-1" :notFirst="true"/>
    <Tree v-if="length > 0" :length="length-1" :notFirst="true"/>
  </div>
</template>
<script>
export default {
  name: "Tree",
  props: ["length", "notFirst"]
};
</script>
此时如果我们使用v-show来进行渲染的时候，此时就会进行渲染，只是不展示而已，
此时会导致一个情况栈溢出。所以不能使用v-show,必须使用v-if。

v-show使用场景：

我们此时想一个场景，如果我们想要在vue中使用一个隐藏表单，当提交的时候，最常见的就是我们在处理csrf
攻击的时候，此时存在一种解决办法就是使用token,在前端使用一个隐藏表单域，当提交的时候，携带者该表单
的内容，此时就需要使用v-show，并且v-if是不行的,因为我希望这个表单存在，只是用户看不见，而不是表单
隐藏。