vue에서 v-if 또는 v-for 중 어느 것이 더 높은 우선순위를 갖습니까?

vue2에서는 v-for가 v-if보다 우선순위가 높으며, vue3에서는 v-if가 v-for보다 우선순위가 높습니다. Vue에서는 동일한 요소에 v-if와 v-for를 동시에 사용하지 마십시오. 그러면 성능이 낭비됩니다(각 렌더링은 먼저 반복된 다음 조건부 판단을 수행합니다). 외부 레이어에 중첩될 수 있으며(페이지 렌더링은 DOM 노드를 생성하지 않음) 이 레이어에서 v-if 판단이 수행된 다음 내부적으로 v-for 루프가 수행됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

v-if 지시문은 콘텐츠를 조건부로 렌더링하는 데 사용됩니다. 지시문은 콘텐츠 블록을 조건부로 렌더링하는 데 사용됩니다. 이 콘텐츠는 지시문의 식이 true를 반환하는 경우에만 렌더링됩니다.
v-for 지시문은 배열을 기반으로 목록을 렌더링합니다. v-for 지시문에는 item in items 형식의 특수 구문이 필요합니다. 여기서 items는 소스 데이터 배열 또는 객체이고 item는 반복되는 배열 요소의 별칭입니다. <code>v-if指令用于条件性地渲染一块内容。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名。

在v-for的时候，建议设置key值，并且保证每一个key值都是独一无二的，这便是diff算法进行优化。

<modal></modal>

    {{ item.label }}

优先级

其实在vue2和vue3中的答案是截然相反的。

• 在vue2中，v-for的优先级高于v-if

• 在vue3中，v-if的优先级高于v-for

vue2中的v-for和v-if

v-if和v-for都是vue模板系统中的指令。

在vue模板编译的时候，会将指令系统转化为可执行的render函数。

编写一个p标签，同时使用v-if和v-for

<div>
    <p>
        {{ item.title }}
    </p>
</div>

创建vue示例，存放isShow和items数据。

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { title: "foo" },
        { title: "baz" }]
    }
  },
  computed: {
    isShow() {
      return this.items && this.items.length > 0
    }
  }
})

ƒ anonymous() {
  with (this) { return 
    _c('div', { attrs: { "id": "app" } }, 
    _l((items), function (item) 
    { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l是vue的列表渲染函数，函数内部都会进行一次if判断。
初步得到结论：v-for优先级是比v-if高。
再将v-for与v-if置于不同标签

<div>
    <template>
        <p>{{item.title}}</p>
    </template>
</div>

再输出下render函数

ƒ anonymous() {
  with(this){return 
    _c('div',{attrs:{"id":"app"}},
    [(isShow)?[_v("\n"),
    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

这时候我们可以看到，v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染。

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
    ...
}

在进行if判断的时候，v-for是比v-if先进行判断。

最终v-for优先级比v-if高。

vue3中的v-for和v-if

在vue3中，v-if的优先级高于v-fo，所以v-if执行时，它调用的变量还不存在，就会导致异常

说明：通常有两种情况下导致我们这样做：

1.为了过滤列表中的项目，比如：

v-for="user in users" v-if="user.isActive"

• 在vue2中，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费
• 在vue3中，v-if的优先级高于v-fo，所以v-if执行时，它调用的变量还不存在，就会导致异常

此时定义一个计算属性（比如 activeUsers），让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)）。

2.为了避免渲染本应该被隐藏的列表

v-for="user in users" v-if="shouldShowUsers"

• 同样，在vue2中，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费
• 在vue3中，这样写虽然并不会报错，但是官方还是及其不推荐外面这样去做

此时把v-if移动至容器元素上（比如ul、ol）或者外面包一层template

v-for의 경우 key 값을 설정하고 각 key 값이 고유한지 확인하는 것이 좋습니다. diff 알고리즘이 최적화되었습니다.

<template v-if="isShow">
    <p v-for="item in items">
</template>

Priority

사실 vue2와 vue3의 답변은 완전히 반대입니다.

• vue2에서는 v-for가 v-if보다 우선순위가 높습니다

• vue3에서 v-if는 v-for
  🎜🎜🎜🎜🎜v-for 및 vue2의 v-if 🎜🎜🎜 v-if 및 v-for는 모두 vue 템플릿 시스템의 명령입니다. 🎜🎜 vue 템플릿이 컴파일되면 명령 시스템이 실행 가능한 render 함수로 변환됩니다. 🎜🎜p 태그를 작성하고 v-if와 v-for를 모두 사용하세요🎜

  computed: {
      items: function() {
        return this.list.filter(function (item) {
          return item.isShow
        })
      }
  }

  🎜vue 만들기 예 , isShow 및 items 데이터를 저장합니다. 🎜rrreeerrreee🎜_l는 vue의 목록 렌더링 함수이며, 함수 내부에서 if 판단이 수행됩니다.
  예비 결론: v-for는 v-if보다 우선순위가 높습니다.
  그런 다음 v-for와 v-if를 다른 태그 🎜rrreee🎜에 배치한 다음 render 함수를 출력합니다 🎜rrreee🎜this v-for와 v-if가 서로 다른 태그에 사용될 때 먼저 판단된 다음 목록이 렌더링되는 것을 볼 수 있습니다. 🎜rrreee🎜if 판단 시 v-if 이전에 v-for가 판단됩니다. 🎜🎜결국 v-for가 v-if보다 우선순위가 높습니다. 🎜🎜🎜vue3의 v-for 및 v-if🎜🎜🎜vue3에서는 v-if가 v-fo보다 우선순위가 높기 때문에 v-if가 실행될 때 호출하는 변수가 아직 존재하지 않습니다. 예외 🎜🎜🎜설명: 🎜이 작업을 수행하는 데는 일반적으로 두 가지 상황이 있습니다. 🎜🎜1 다음과 같이 목록의 항목을 필터링하려면 🎜rrreee
  🎜vue2에서 이를 함께 배치하고 렌더링 함수에서 볼 수 있듯이 루프가 먼저 실행된 다음 조건이 판단됩니다. 목록에 있는 요소 중 작은 부분만 렌더링하더라도 다시 매번 전체 목록을 순회해야 합니다. 렌더링하면 낭비가 됩니다🎜🎜vue3, v-if에서는 v-fo보다 우선순위가 높기 때문에 v-if가 실행될 때 호출하는 변수가 아직 존재하지 않아 예외가 발생합니다🎜🎜🎜이에 시간이 지나면 계산된 속성(예: activeUsers)을 정의하고 필터링된 목록(예: users.filter(u=>u.isActive))만 반환합니다. 🎜🎜2. 숨겨야 할 목록이 렌더링되는 것을 방지하기 위해🎜rrreee
  🎜마찬가지로 vue2에서는 루프가 먼저 실행된 다음 조건이 실행되는 것을 출력 렌더링 함수에서 볼 수 있습니다. 목록에 있는 소수의 요소만 렌더링하려면 다시 렌더링할 때마다 전체 목록을 순회해야 하는데 이는 매우 낭비적입니다. 🎜🎜vue3에서는 이런 방식으로 작성하면 오류가 보고되지 않지만, 공식에서는 여전히 외부에서 수행하는 것을 권장하지 않습니다. 🎜🎜🎜 이때 v-if를 컨테이너 요소(예: ul, ol</code)로 이동하세요. >) 또는 <code>템플릿 레이어로 래핑하면 됩니다. 🎜🎜🎜🎜Notes🎜🎜🎜🎜동일한 요소에 v-if와 v-for를 동시에 사용하지 마십시오. 이는 성능 낭비를 초래합니다(각 렌더링은 먼저 루프를 수행한 다음 조건부 판단을 수행합니다)🎜🎜🎜🎜 이러한 상황을 피하려면 템플릿을 외부 레이어에 중첩하고(페이지 렌더링은 dom 노드를 생성하지 않음) 이 레이어에서 v-if 판단을 수행한 다음 내부적으로 v-for 루프를 수행합니다🎜🎜🎜rrreee🎜🎜🎜if 조건이 발생하면 루프 내부에서 표시할 필요가 없는 항목을 계산된 속성을 통해 미리 필터링할 수 있습니다🎜

  computed: {
      items: function() {
        return this.list.filter(function (item) {
          return item.isShow
        })
      }
  }

  【相关视频教程推荐：vuejs入门教程、web前端入门】

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