8、v-if/v-else-if/v-else

条件渲染，即当条件成立时，才进行渲染，条件不成立时不进行渲染，无法获取其DOM结构。
1）尽量避免重复判断的逻辑出现。
示例：

反例

<div v-if="show">...</div>
<div v-if="!show">...</div>

正例

<div v-if="show">...</div>
<div v-else>...</div>

2）尽量避免多次判断同一逻辑
示例：

反例

<div v-if="index<10">...</div>
<div v-if="index>20">...</div>
<div v-if="index>=10&&index<=20">...</div>

正例

<div v-if="index<10">...</div>
<div v-else-if="index>20">...</div>
<div v-else>...</div>

3）尽量在同一组条件判断中加上相同的key，避免因数据更新而触发过渡
示例：

反例

<div v-if="index<10">...</div>
<div v-else-if="index>20">...</div>
<div v-else>...</div>

正例

<div v-if="index<10" key="prod-data">...</div>
<div v-else-if="index>20" key="prod-data">...</div>
<div v-else key="prod-data">...</div>

4）v-show 是先渲染DOM结构但是不显示，条件成立的时候才显示，有更高的初始渲染消耗；v-if 是条件成立才开始渲染DOM结构，有更高的切换消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。根据需要进行选择，而不是一概而论。