v-for 和 v-if的优先级（源码分析）app.$options.render

最新推荐文章于 2023-09-02 18:50:27 发布

zjp567

最新推荐文章于 2023-09-02 18:50:27 发布

阅读量215

点赞数

分类专栏：前端笔记文章标签： js vue

本文链接：https://blog.csdn.net/zjp567/article/details/124036538

版权

前端笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文探讨了 Vue 模板中 v-if 和 v-for 语句的优先级问题。当它们在同一元素上使用时，v-for 的优先级高于 v-if，这可能导致性能浪费。为优化性能，建议将 v-if 放到外层的 template 标签中，使条件判断先行，减少不必要的循环。示例代码展示了如何实现这一优化策略。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script src="js/Vue.js"></script>
<div id="demo">
    <h1>v-for 和 v-if的优先级</h1>
<!--    <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 type="text/javascript">
    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>