为什么vue中的v-if和v-for不建议一起使用？

        Vue2中v-for的优先级大于v-if的优先级

        在vue2中，Vue 中的 `v-if` 和 `v-for` 是用于控制元素显示和循环渲染的指令，但是它们在一起使用时，会产生一些潜在的问题，因此不建议一起使用。

        主要有以下两个问题：

        1. 性能问题：当 `v-if` 和 `v-for` 一起使用时，Vue 会在每次循环渲染时，都会重新计算 `v-if` 指令的值，这会导致额外的性能开销。特别是在循环数据量较大的情况下，可能会导致页面卡顿和性能下降。

        2. 渲染问题：当 `v-if` 和 `v-for` 一起使用时，可能会产生一些意外的渲染结果。例如，当一个元素同时包含 `v-if` 和 `v-for` 指令时，可能会出现一些意外的渲染结果，导致页面显示错误。

        解决方式：

        1. 在外部元素上使用`v-if`，将`v-for`应用于其内部元素，以确保条件检查只在一次循环中执行。

<div v-if="shouldRenderList">
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</div>

        2. 使用计算属性或方法来准备要渲染的列表，以在模板中只包含需要渲染的数据。

        3. 考虑使用`v-show`，它仅在元素的`display`属性上切换，而不会添加或删除DOM元素，适用于需要频繁切换元素可见性的情况。

        Vue3中v-if的优先级大于v-for的优先级，意味着可以这样使用：

     <template v-for="goods in goodss">
                <li v-if="goods.isOut">
                    {{goods.name}}
                </li>
     </template>