Vue条件渲染&列表渲染

条件渲染：

1. v-if：适用于切换频率较低的场景；不展示的DOM元素直接被移除；可以和v-else-if v-else一起使用，但是结构不能被打断。
2. v-show：适用于切换频率较高的场景；不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

列表渲染：

<ul>
    <li v-for='(value,index) in data' :key='index'></li>
</ul>

<ul>
    <li v-for='(value,index) in data' :key='value.id'></li>
</ul>

使用index作为key可能引发的问题？

1. 若对数据进行逆序添加、逆序删除等破坏操作会产生没有必要的真是DOM更新  => 界面效果没问题，但效率低。
2. 如果结构中还包含输入类的DOM，会产生错误的DOM更新 => 界面有问题。

开发中如何选择key?

1. 最好使用每条数据的唯一标识作为key,如主键id.
2. 如果不对数据进行逆序添加或删除等破坏顺序操作，仅用于渲染列表展示，可以使用index作为key.