剖析vue常见问题（一）之v-for与v-if的优先级

背景：vue中经常使用到v-for和v-if，那么它们的优先级是怎么样的呢？怎么才能实现性能优化呢？下面来简单分析一下，如何分析，请参考以下测试demo，以及源码中参考src/compiler/codegen/index.js。demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue  v-if  v-for</title>
</head>
<body>
    <div>v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？源码中找答案src/compiler/codegen/index.js</div>


    <div id="demo">
        <!--用法一,不推荐，先走循环浪费性能-->
        <!-- <p v-for="child in children" v-if="isFolder">{
   
   {child.title}}</p> -->
        <!--用法二,在外层做判断，内层走循环-->
        <template v-if="isFolder">
            <p v-for="child in children"> {
   
   {child.title}} </p>
        </template>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建实例
        const app = new Vue({
            el: '#demo',
            data() {
                return {
                    children: [
                        {title:'foo'},
                        {title:'bar'},
                    ]
                }
            },
            computed: {
                isFolder() {
                    return this.children && this.children.length > 0
                }
            },
        });
        console.log(app.$options.render);//查看渲染函数
    </script>
</body>
</html>

执行方法一，查看render函数，得出如下结果：

执行方法二，查看渲染函数，得出如下结果：

由以上执行得出结论：

1.v-for显然优先于v-if被解析，如果同时出现在同级每次渲染都会先执行循环再判断条件，由此可见对性能损耗比较大，由此我们可以采用法二，在外层添加判断条件，内层循环来优化性能。下面是源码验证：

以上是关于vue中v-for和v-if的深层剖析，希望对大家理解vue有一定的帮助。

剖析vue常见问题（一）之v-for与v-if的优先级

猜你喜欢