结合源码，谈谈v-for和v-if谁的优先级高？应该如何正确使用避免性能问题?

最新推荐文章于 2024-05-28 09:35:57 发布

林不羁

最新推荐文章于 2024-05-28 09:35:57 发布

阅读量952

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36337754/article/details/105266962

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

对应源码的位置compiler/codegen/index.js

1.测试的案例代码

<body>
  <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="../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>

两者同级时,渲染函数如下：

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()}),0)}
}

_l包含了isFolder的条件判断(_l列表渲染函数)

两者不同级时,渲染函数如下：

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
}

先判断了条件再看是否执行_l

2.结论:

1.显然v-for优先于v-if被解析

我写了一个测试的代码并且在源码中找到了这个结论
codegen>index.js中for的优先级高于if

 if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {//for
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {//if
 ...

2.如果同时出现，每次渲染都会先执行循环再判断条件,无论如何循环都不可避免，浪费了性能
3.要避免出现这种情况，则在外层嵌套template,在这一层进行v-if判断，然后在内部进行v-for循环
4.有一个问题，当循环项中有需要判断的属性怎么办呢？这个时候应该用计算属性做一下过滤，避免循环中还要进行判断

林不羁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
结合源码，谈谈v-for和v-if谁的优先级高？应该如何正确使用避免性能问题?

对应源码的位置compiler/codegen/index.js1.测试的案例代码<body> <div id="demo"> <p v-for="child in children" v-if="isFolder">{{child.title}}</p> <!-- <template v-if="isFold...
复制链接

扫一扫

专栏目录