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

it2023-09-15 66

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

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

一、案例分析

<!DOCTYPE html><html> <head> <title>Vue事件处理</title> </head> <body> <div id="demo"> <h1>v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？</h1>  <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循环。如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

最新回复(0)