Vue的常见问题(一) - v-for和v-if的优先级及其性能优化

v-for和v-if的优先级及其性能优化一、案例分析1. 两者同级时2. 两者不同级时二、源码解析三、结论和优化方案一、案例分析<!DOCTYPE html><html><head><title>Vue事件处理</title> </head><body><div id="demo"><h1>

莫名就

2998人浏览 · 2020-10-20 20:52:04

莫名就 · 2020-10-20 20:52:04 发布

v-for和v-if的优先级及其性能优化

一、案例分析
- 1. 两者同级时
- 2. 两者不同级时
二、源码解析
三、结论和优化方案

一、案例分析

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

1. 两者同级时

渲染函数如下：

(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)}
})

_l包含了isFolder的条件判断。

2. 两者不同级时

渲染函数如下：

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

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

二、源码解析

源码位置：src/compiler/codegen/index.js

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }

  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) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    let code
    if (el.component) {
      code = genComponent(el.component, el, state)
    } else {
      let data
      if (!el.plain || (el.pre && state.maybeComponent(el))) {
        data = genData(el, state)
      }

      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c('${el.tag}'${
        data ? `,${data}` : '' // data
      }${
        children ? `,${children}` : '' // children
      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {
      code = state.transforms[i](el, code)
    }
    return code
  }
}

观察源码发现，在对同一标签解析解析时，先解析v-for再解析v-if。
所以，在同一标签中，v-for的优先级大于v-if。

三、结论和优化方案

显然v-for优先于v-if被解析。
如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。
要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环。
如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^