vue에서 v-if와 v-for의 차이점은 무엇입니까-프런트엔드 Q&A-php.cn

vue에서 v-if와 v-for의 차이점은 무엇입니까

青灯夜游

풀어 주다： 2022-12-27 18:48:33

원래의

3110명이 탐색했습니다.

v-if와 v-for의 차이점: 1. 다른 기능 v-if 명령은 조건부로 내용을 렌더링하는 데 사용됩니다. 이 내용은 명령의 표현식이 true를 반환하는 경우에만 렌더링됩니다. value; while v -for 지시문은 배열을 기반으로 목록을 렌더링합니다. 2. 우선순위가 다릅니다. v-if보다 우선순위가 높습니다. if 판단 시 v-for가 v-if보다 먼저 판단됩니다.

vue에서 v-if와 v-for의 차이점은 무엇입니까

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

우선 공식 문서에는 v-for와 v-if를 함께 사용하는 것을 권장하지 않는다고 명시되어 있습니다.

1. v-if 및 v-for의 역할

v-if 명령어 는 콘텐츠를 조건부로 렌더링하는 데 사용됩니다 . 이 콘텐츠는 명령 표현식이 참값을 반환할 때만 렌더링됩니다.

v-for 지시문은 an 배열을 기반으로 목록 을 렌더링합니다. v-for 지시문에는 item in items 형식의 특수 구문이 필요합니다. 여기서 항목은 소스 데이터 배열 또는 개체이고 항목은 반복되는 배열 요소의 별칭입니다.

v-for에서는 키 값을 설정하고 각 키 값이 고유한지 확인하는 것이 좋습니다. 그러면 diff 알고리즘 최적화가 용이해집니다.

둘의 사용법 차이는 다음과 같습니다.

<div v-if="isShow" >123</div>
  
<li v-for="item in items" :key="item.id">
  {{ item.label }}
</li>

로그인 후 복사

2. 둘의 우선순위

사용시 v-for가 v-if

v-if보다 우선순위가 높습니다. 그리고 v- for는 vue 템플릿 시스템의 모든 명령어입니다

vue 템플릿이 컴파일되면 명령어 시스템을 실행 가능한 렌더링 함수로 변환합니다

예
p 태그를 작성하고 v-if 및 v-for를 사용합니다

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{ item.title }}
  </p>
</div>

로그인 후 복사

vue 인스턴스를 생성하고 isShow 및 항목 데이터를 저장합니다

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

로그인 후 복사

템플릿 명령의 코드는 렌더링 함수에서 생성됩니다. 렌더링 함수는 app.$options.render

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

로그인 후 복사

_l을 통해 얻을 수 있습니다. vue의 함수, 함수 내부에서 if 판단이 수행되고
예비 결론이 도출됩니다. v-for가 v-if보다 우선순위가 높습니다

그런 다음 v-for와 v-if는 서로 다른 레이블에 배치됩니다

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </template>
</div>

로그인 후 복사

그런 다음 렌더링 함수를 출력합니다

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

로그인 후 복사

이때 v-for와 v-if가 서로 다른 태그에 작용할 때 먼저 판단한 다음 목록에 렌더링하는 것을 볼 수 있습니다

vue 소스 코드를 확인하겠습니다
소스 코드 위치 : vue-devsrccompilercodegenindex.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 === &#39;template&#39; && !el.slotTarget && !state.pre) {
  return genChildren(el, state) || &#39;void 0&#39;
 } else if (el.tag === &#39;slot&#39;) {
  return genSlot(el, state)
 } else {
  // component or element
  ...
}

로그인 후 복사

In if 판단을 할 때 v-for가 v-if보다 먼저 판단됩니다. 최종 판단 결과는 v-if 및 v-보다 우선순위가 높습니다. for는 동일한 요소에 동시에 사용되어 성능 낭비가 발생합니다(각 렌더링이 먼저 루프된 후 조건부 판단을 수행함)

이 상황을 피하려면 템플릿(페이지)을 외부 레이어에 중첩하세요. dom 노드를 생성하지 않음), 이 레이어에서 v-if 판단을 수행한 후 내부적으로 v-for 루프를 수행합니다

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

로그인 후 복사

루프 내부에 조건이 나타나면 표시할 필요가 없는 항목을 필터링할 수 있습니다. 계산된 속성을 통해 진행

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

로그인 후 복사

사례 설명:

이유: v-for는 v-if보다 우선순위가 더 높기 때문에 매번 전체 배열을 순회해야 하므로 불필요한 계산이 발생하고 성능에 영향을 미칩니다.

예를 들어 , 페이지에서 v-for를 사용하여 100개의 li 태그를 반복하지만 index=97인 li 태그의 내용만 표시하고 나머지는 숨깁니다.

100개의 목록에 하나의 데이터만 사용해야 하는 경우에도 전체 배열을 반복합니다.

 <ul>
    <li v-for="item in list" v-if="item.actived">{{item.name}}</li>
 </ul>

로그인 후 복사

해결책: 계산된

<ul>
    <li v-for="item in activeList">{{item.name}}</li>
</ul>

computed: {
  activeList() {
    return this.list.filter(val => {
      return val.actived;
    });
  }
},

로그인 후 복사

사용[관련 권장 사항: vuejs 비디오 튜토리얼,

웹 프론트 엔드 개발

]

위 내용은 vue에서 v-if와 v-for의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!