우선순위 비교: v-for 또는 v-if 중 어느 것이 더 높습니까?

v-for와 v-if 중 어느 것이 더 높은 우선순위를 갖나요? 다음 글에서는 실제 예제와 소스코드를 통해 v-for와 v-if의 우선순위를 설명하겠습니다.
v-for和v-if的优先级，相信你看完后会茅塞顿开的。

结论

1、本身并不建议将v-for和v-if同时使用的。（学习视频分享：vue视频教程）

2、vue2里面v-for比v-if的优先级更高。因为vue2在模板编译的时候会先处理v-for再处理v-if，所以生成的渲染函数会先执行循环，然后在循环里面再执行条件判断。

3、这样做带来的问题就是

对于场景1：<li v-for="user in users" v-if="user.show">

每次重新渲染的时候，都要重新遍历整个列表，其实我们只需要列表的一部分，这样做浪费性能。推荐的做法是，通过计算属性先过滤出我们需要的部分，再去渲染，更高效。

对于场景2: <li v-for="user in users" v-if="globalShow">

globalShow这个判断其实如果是false,循环并不需要执行，但是现在跟v-if一起用，不管globalShow是否是true都要执行循环，完全是浪费。推荐的做法是将v-if上移到ul容器。

4、需要注意的是，vue3的breaking change，在vue3中v-if的优先级比v-for高，所以如果同时使用的话，对于场景1，这个时候user还没有，v-if="user.show"就会报错

5、一般我们如果有用eslint，也会给我们报错，对应的规则是：vue/no-use-v-if-with-v-for

实际例子

例如：以下的模板，将会生成下面的渲染函数

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
        {{ user.name }}
    </li>
</ul>

生成的渲染函数如下

with(this) {
    return _c('ul', _l((users), function (user) {
        return (user.isActive) ? _c('li', user.name) : _e()
    }), 0)
}

从上面生成的渲染函数可以看出，会先执行_l遍历user，在里面进行条件判断

源码

处理v-if和v-for的源码

src/compiler/index.js

// 模板解析，生成ast树
const ast = parse(template.trim(), options)
if (options.optimize !== false) {
    optimize(ast, options)
}
const code = generate(ast, options)

根据ast生成代码，假如是上面的模板，生成的ast简化后如下

// 可以看出v-for和v-if都解析出来了
 ast = {
     'type': 1,
     'tag': 'ul',
     'attrsList': [],
     'attrsMap': {},
     'children': [{
     'type': 1,
     'tag': 'li',
     'attrsList': [],
     'attrsMap': {
         'v-for': 'user in users',
         'v-if': 'user.show'
     },
     // v-if解析出来的属性
     'if': 'user.show',
     'ifConditions': [{
         'exp': 'user.show',
         'block': // 指向el自身
     }],
     // v-for解析出来的属性
     'for': 'users',
     'alias': 'user',
     'iterator1': 'index',
     'parent': // 指向其父节点
     'children': [
         'type': 2,
         'expression': '_s(user)'
         'text': '{{user}}',
         'tokens': [
             {'@binding':'user'},
         ]
      ]
     }]
 }

compiler/codegen/index.js

// generate 调用 genElement
const code = ast ? genElement(ast, state) : '_c("div")'
// genElement里面的处理
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
// 从这可以看出来，先执行genFor，处理v-for指令，在genFor里面会递归调用genElement，继续处理v-if，genFor会将forProcessed设为true，这样下次进来的时候就不会处理for了
} 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 {
// 最后这里处理标签等
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c('${el.tag}'${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}

// genFor的代码
const exp = el.for // 对应上面ast的 for: users
const alias = el.alias // alias: user
// iterator1 对应v-for的(item,key,index) in items的key
// iterator2 对应的是index
// 通常我们遍历数组 key就是index
// 假如我们遍历的是对象 key就是对象的key，index就是遍历的索引
const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''
el.forProcessed = true // 下次递归调用genElement的时候就不会重复处理v-for了
return `${altHelper || '_l'}((${exp}),` +
`function(${alias}${iterator1}${iterator2}){`

// 这里处理完了v-for，递归调用genElement继续处理v-if
`return ${(altGen || genElement)(el, state)}` +
'})'

最终会生成类似如下的代码返回出去

결론

1. v-for와 v-if를 동시에 사용하는 것은 권장되지 않습니다. (학습 영상 공유: vue 영상 튜토리얼)2. vue2에서는 v-for가 v-if보다 우선순위가 높습니다. vue2는 템플릿을 컴파일할 때 v-for를 먼저 처리한 다음 v-if를 처리하기 때문에 생성된 렌더링 함수는 먼저 루프를 실행한 다음 루프 내에서 조건부 판단을 실행합니다. 🎜3 이렇게 하면 발생하는 문제는 🎜🎜시나리오 1의 경우: <li v-for="user in users" v-if="user.show">🎜🎜Every 다시 렌더링할 때마다 전체 목록을 다시 순회해야 하기 때문에 실제로는 목록의 일부만 필요하므로 성능이 낭비됩니다. 권장되는 접근 방식은 계산된 속성을 통해 필요한 부품을 필터링한 다음 렌더링하는 것인데, 이는 더 효율적입니다. 🎜🎜시나리오 2의 경우: <li v-for="user in users" v-if="globalShow">🎜🎜실제로 globalShow의 판단이 거짓인 경우 루프는 실행할 필요가 없습니다. 그러나 이제 v-if와 함께 사용하면 globalShow가 true인지 여부에 관계없이 루프를 실행해야 하는데 이는 완전한 낭비입니다. 권장되는 접근 방식은 v-if를 ul 컨테이너로 이동하는 것입니다. 🎜🎜4 vue3의 획기적인 변경의 경우 v-if가 vue3의 v-for보다 우선순위가 높으므로 동시에 사용하는 경우 시나리오 1의 경우 사용자는 아직 사용되지 않았습니다. 이번에는 v-if=" user.show"가 오류를 보고합니다🎜🎜5. 일반적으로 eslint를 사용하면 해당 규칙도 vue/no-use-v-if입니다. -with-v-for🎜

실제 예

🎜예: 다음 템플릿은 다음 렌더링 함수를 생성합니다🎜

_l((users), function(user, index) {
    // 如果有v-if 前面就会有个条件判断，如user.isActive
    return (user.isActive) ? _c('li', user.name) : _e()
});

🎜생성된 렌더링 함수는 다음과 같습니다🎜rrreee 🎜위에서 생성된 렌더링 함수에서 볼 수 있듯이 _l가 user를 순회하고 거기에서 조건부 판단을 수행하는 것이 먼저 실행됩니다🎜

소스 코드

🎜v-if 및 v-for 처리 소스 코드🎜🎜src/compiler/index.js🎜rrreee🎜는 ast를 기반으로 코드를 생성합니다. 위 템플릿에서 생성된 ast는 다음과 같이 단순화됩니다.🎜rrreee🎜compiler/codegen/index.js🎜rrreee🎜결국 다음과 유사한 코드를 생성하여 반환합니다🎜rrreee 🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 우선순위 비교: v-for 또는 v-if 중 어느 것이 더 높습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!