1.v-for和v-if的优先级哪个更高

最新推荐文章于 2024-04-22 17:52:18 发布

sheerhr

最新推荐文章于 2024-04-22 17:52:18 发布

阅读量285

点赞数

分类专栏：面试必备问题

本文链接：https://blog.csdn.net/qq_24871849/article/details/111590172

版权

面试必备问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
      <title>Vue事件处理</title>
</head>

<body>
    <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 src="vue.js"></script>
      
    <script>
        // 创建实例
        const app = new Vue({
            el: '#demo',
            data() {
                return {
                    children: [
                        { title: 'foo' ,isshow:true},
                        { title: 'bar' ,isshow:false},
                    ]
                }
            },
            computed: {
                isFolder() {
                    return this.children && this.children.length > 0
                }
            },
        });
        console.log(app.$options.render);

    </script>
</body>

</html>

同级时渲染函数

        (function anonymous(
        ) {
        with(this){
            return _c('div',{attrs:{"id":"demo"}},
            [_c('h1',[_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),
                _v(" "),_l((children),function(child){
            return (isFolder) ?_c('p',[_v(_s(child.title))]):_e()})],2)}
        })

外层为v-if内层为v-for渲染函数

        (function anonymous(
        ) {
            with (this) { return _c('div', { attrs: { "id": "demo" } }, 
            [_c('h1', [_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),
             _v(" "), _v("\n            "), 
             (isFolder) ? [_v("\n                  "), _l((children), function (child) { return _c('p', [_v(_s(child.title))]) })] :+_e()
            ], 2) }
        })