vue2/vue3中v-if和v-for优先级问题

为什么v-if和v-for不应该一起用？

vue2中v-for的优先级高于v-if，如果两个在同一个标签中使用，每次使用v-for都得执行v-if遍历整个数组，一旦数组数据很大，这对性能而言是很大的开销。简单来说就是，会把所有的代码先渲染出来在进行条件判断，这样就造成了性能的浪费。

<div id="app">
        <ul>
            <li v-for="item in list"  v-if="item.age>20">
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
            </li>
        </ul>
</div>

 var testCreate = {
        el: '#app',
        data() {
            return {
                // 列表数据
                list: [
                    {
                        name: 'jack',
                        age: 23
                    },
                    {
                        name: 'john',
                        age: 33
                    },
                    {
                        name: 'petty',
                        age: 20
                    },
                ],
            }
        },
    }
var app = new Vue(testCreate)

结果：

vue3中v-if的优先级高于v-for，如果写在同一个标签中会先使用v-if，而v-if的数据来自v-for的循环子项会导致出错，因为数据还未声明。

    <div id="app">
        <ul>
            <li v-for="item in list"  v-if="item.age>20">
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
            </li>
        </ul>
    </div>

    var testCreate = {
        // el: '#app',
        data() {
            return {
                // 列表数据
                list: [
                    {
                        name: 'jack',
                        age: 23
                    },
                    {
                        name: 'john',
                        age: 33
                    },
                    {
                        name: 'petty',
                        age: 20
                    },
                ],
            }
        },
    }
    // var app = new Vue(testCreate)
    Vue.createApp(testCreate).mount('#app')

结果：v-if的优先级高于v-for，所以item此时还未获取到，于是就报item.age出错。