vue3个人心得---（指令初解） 条件渲染/显示指令v-if与v-show

条件渲染/显示指令v-if与v-show

一、条件渲染指令v-if

1、v-if 控制DOM的渲染

v-if 指令用于条件性地渲染DOM。DOM只会在指令值为真时才被渲染。
v-if 值为false时，DOM不只是看不见，而是从DOM树中销毁。如下：v-if为false的DOM不在打印列表中。

<template>
<div id="one">
  <button v-if="tt">我会在DOM树中吗</button>
  <input type="checkbox"  v-show="tt"> 
</div>
  <button @click="yy">测试</button>
</template> 
<script setup>
  import {ref,nextTick} from 'vue'
  const tt=ref(true)
  var el
  nextTick(() => {el=document.getElementById("one")})
  function yy(){tt.value=!tt.value,console.log(el.children)}
</script>

v-if也能用于子组件的渲染控制，当为false时，子组件被销毁。

2、显示组控制v-else与v-else-if

多个相邻的标签可以组成显示组。在第一个标签上使用v-if指令，在之后的标签上搭配v-else与v-else-if指令共同控制显示组的显示。一个显示组中不能夹杂无渲染指令的标签。
v-else
当显示组中其它标签的渲染指令值为false时，渲染本标签。此指令无值，它的渲染是由显示组中其它标签指令值为依据控制的。
v-else指令不能单独使用，必须在显示组中搭配有v-if指令，且v-else指令标签必须是组中最后一个标签。
v-else-if
此指令必须赋值，当指令值为真时渲染。指令不能单独使用，必须在显示组中搭配有v-if指令。
v-else与v-else-if使用如下：

<template>
  <input type="text" v-model="type">
  <div v-if="type === 'A'"> A </div>
  <div v-else-if="type === 'B'"> B </div>
  <div v-else-if="type === 'B'">  </div>
  <div v-else-if="type === 'C'"> C </div>
  <div v-else> Not A/B/C </div>
</template> 
<script setup>
  import {ref,nextTick} from 'vue'
  const type=ref()
</script>

3、布尔值转换

布尔值为0、-0、NaN、""、null、undefined 为false，其它值为true。

二、条件显示指令v-show

v-show=false等同于:style="{display:'none'}"隐藏，v-show是在已渲染的元素上有条件的显示（前提是元素已渲染），控制的是显示。
v-show值为false时，DOM只是看不见并不会从DOM树中销毁。

三、v-if还是v-show

1、渲染方面

初始阶段： v-show初始必渲染v-if有条件的渲染，如果DOM不是初始就要显示的，可以用v-if=false以减轻初始化时的运算。
生命阶段： v-if切换显示时必渲染v-show只初始必渲染一次，如果DOM在生命阶段频繁切换显示，可以用v-show以减轻生命阶段的运算。
销毁： v-if能控制销毁DOM而v-show不能销毁DOM，如果需要DOM不显示时释放内存空间用可以使用v-if。

2、使用环境方面

显示组： 使用了v-else与v-else-if的显示组必须使用v-if。
template 标签： <template> 标签上只能使用v-if。
注：组件最外层template标签非标签，而是一个标明交给渲染函数进行处理的占位符，处理的时候会直接提取template内的内容，忽略掉template这个标签本身，所以写在组件最外层template标签上的属性和指令都是没有用的。内层的<template> 标签才可以正常放置属性和指令，如下指令放在内层template， v-if有显示v-show无显示：

<template>
<template v-if="1"> 
 <button>内层的template才能放置v-if</button>
</template>
<template v-show="1"> 
 <button>内层的template才能放置v-if</button>
</template>
</template>

使用了v-for​的标签： 如果显示指令要使用到v-for套取出来的值，就只能使用v-show。
这是因为v-if 比v-for 优先级更高，v-if ​赋值要使用v-for套取值时，v-for还没有开始套取。如果不需要使用v-for套取值则v-if与v-show都可以用。
在组件上使用： v-if可以随意的在组件标签上使用，v-show只能在子组件只有一个顶级标签时才可使用（子组件多个顶级标签并列时不可用）。