Vue3.2 v-if优先级大于v-for导致的bug和解决方案

错误代码如下

      <cate-item
        v-for="item in queryItems"
        :key="item.id"
        v-if="itemShowMap[item.title]"
        @click="handleQueryItemClick(item)"
        :title="item.title"
        :imgSrc="item.imgSrc"
      ></cate-item>

这里报错说明：v-if="itemShowMap[item.title]"拿不到undefined的title
突然想起来Vue3 v-if优先级是大于v-for的
v-if时，item都没v-for出来
那么解决方案就是先v-for

正确代码如下

      <template v-for="item in queryItems" :key="item.id">
        <cate-item
          v-if="itemShowMap[item.title]"
          @click="handleQueryItemClick(item)"
          :title="item.title"
          :imgSrc="item.imgSrc"
        ></cate-item>
      </template>

注意：
最好用template包裹，以免影响原有样式布局
key必须写在template里面，否则会报错