Vue v-if与v-for一起使用在 Vue 2 中，v - for 优先级高于 v - if，当两者同时出现在一个元

在 Vue 2 中，v - for 优先级高于 v - if，当两者同时出现在一个元素上时，会先进行循环渲染，再进行条件判断。

在 Vue3 中，v-if优先级高于v-for。

//template部分
<li v-for="item in list" :key="item.name" v-if="item.show">
        {{ item.name }} - {{ item.age }}
</li>

//script部分
const list = reactive([{
    name: 'a',
    age: 1,
    show: true
}, {
    name: 'b',
    age: 2,
    show: false
}]);

//浏览器报错
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'show')
    at Proxy.render (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Test.vue?vue&type=template&id=5b2d5ecc:6:230)
    at renderComponentRoot (runtime-core.esm-bundler.js:6754:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5554:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:289:19)
    at setupRenderEffect (runtime-core.esm-bundler.js:5689:5)
    at mountComponent (runtime-core.esm-bundler.js:5463:7)
    at processComponent (runtime-core.esm-bundler.js:5415:9)
    at patch (runtime-core.esm-bundler.js:4934:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5641:9)
    at ReactiveEffect.run (reactivity.esm-bundler.js:289:19)

在vue3中，浏览器直接报错找不到值。因为先执行v-if时，还没有开始遍历，item.show没值。

总结

一般项目默认配置了ESLint，它会报错警告，不允许v-for和v-if一起使用。

不要在同一个元素上使用v-for与v-if，可以加一层元素包裹。