vue踩坑之：v-for和v-if造成重复循环展示

遇到的问题：接口只返回了一组数据，但是在页面展示时却出现了重复渲染，展示了两组商品。代码如下：

<div v-if="type == 1" v-for="(item, index) in productList" :key="index">预售：{{item.name}}</div>
<div v-else v-for="(item, index) in productList" :key="index">普通商品：{{item.name}}</div>

查阅了资料 传送门，发现是原因是，v-for 比 v-if 优先级高，所以使用的话，每次 v-for 都会执行 v-if，因此 v-if 会重复运行在每个 v-for 中。

解决方案：将 v-for 和 v-if 分开写，不要运用在同一个元素上。
建议在 template 元素上使用 v-if 条件渲染分组。

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果添加到div 元素中，会多渲染一个元素，此时可以把一个 template 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 template 元素。

修改如下：

<template v-if="type == 1">
	<div v-for="(item, index) in productList" :key="index">预售：{{item.name}}</div>
</template>
<template v-else>
	<div v-for="(item, index) in productList" :key="index">普通商品：{{item.name}}</div>
</template>