>  기사  >  웹 프론트엔드  >  vue에서 v-if 또는 v-for 중 어느 것이 더 높은 우선순위를 갖습니까?

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

青灯夜游
青灯夜游원래의
2022-07-20 18:02:175158검색

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

vue에서 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

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

    vue2中的v-for和v-if

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

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

    编写一个p标签,同时使用v-ifv-for

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

    创建vue示例,存放isShowitems数据。

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

    _lvue的列表渲染函数,函数内部都会进行一次if判断。
    初步得到结论:v-for优先级是比v-if高。
    再将v-forv-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-forv-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移动至容器元素上(比如ulol)或者外面包一层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

      🎜🎜vue에서 v-if 또는 v-for 중 어느 것이 더 높은 우선순위를 갖습니까?🎜🎜🎜v-for 및 vue2의 v-if 🎜🎜🎜 v-ifv-for는 모두 vue 템플릿 시스템의 명령입니다. 🎜🎜 vue 템플릿이 컴파일되면 명령 시스템이 실행 가능한 render 함수로 변환됩니다. 🎜🎜p 태그를 작성하고 v-ifv-for를 모두 사용하세요🎜
      computed: {
          items: function() {
            return this.list.filter(function (item) {
              return item.isShow
            })
          }
      }
      🎜vue 만들기 예 , isShowitems 데이터를 저장합니다. 🎜rrreeerrreee🎜_lvue의 목록 렌더링 함수이며, 함수 내부에서 if 판단이 수행됩니다.
      예비 결론: v-forv-if보다 우선순위가 높습니다.
      그런 다음 v-forv-if를 다른 태그 🎜rrreee🎜에 배치한 다음 render 함수를 출력합니다 🎜rrreee🎜this v-forv-if가 서로 다른 태그에 사용될 때 먼저 판단된 다음 목록이 렌더링되는 것을 볼 수 있습니다. 🎜rrreee🎜if 판단 시 v-if 이전에 v-for가 판단됩니다. 🎜🎜결국 v-forv-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)로 이동하세요. >) 또는 템플릿 레이어로 래핑하면 됩니다. 🎜🎜🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.