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

차이점: 1. "v-if"는 판단 조건에 따라 DOM 요소를 동적으로 추가 및 삭제하고, "v-show"는 판단 조건에 따라 요소를 동적으로 표시하고 숨깁니다. 2. "v-if" 전환 높은 소비, "v-show"의 초기 렌더링 소비가 높습니다. 3. "v-show"의 성능이 "v-if"보다 높습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

v-if와 v-show의 차이점은 프론트엔드 인터뷰에서 자주 묻는 기본 지식 포인트입니다. v-if와 v-show는 이름에서 알 수 있듯이 뷰의 표시 효과를 판단하는 데 사용됩니다. 층. 그렇다면 구체적으로 어떻게 표시되나요? v-if와 v-show의 차이점은 무엇인가요?

먼저 Vue 중국어 커뮤니티 문서 소개를 살펴보겠습니다.

Vue 중국어 커뮤니티 문서에는 간단히 다음과 같이 나와 있습니다. 초기 렌더링 중 조건부 판단 표시

실제 개발에서는 종종 v-if와 v-show를 사용하여 디스플레이를 판단합니다.

<div class="tc" v-if="pload && list.length<1" >
   <img src="../assets/img/mall_none_order.png" />
</div>

위 예에서 v-if의 기능은 pload와 list를 기준으로 div가 표시되는지 여부를 판단하는 것입니다. length는

반대로 판단 조건이 true가 아닌 경우 v -if는 표시되지 않습니다.

<div class="tc" v-if="pload && list.length<1" >
   <img src="../assets/img/mall_none_order.png" />
</div>

실제로 판단을 위해 위 사례 코드를 v-show로 변경할 수 있으며 시각적 효과는 동일합니다. 참고: 시각적 효과만 동일하며 둘 사이에는 동등한 관계가 없습니다. two (나중에 분석); v-show를 사용하여 조건 pload가 true이고 div 내부의 img 태그가 적용될 때만 설정됩니다.

위에서 언급한 것처럼 두 v-if; 그리고 v-show는 디스플레이 효과의 판단 조건에 따라 구현될 수 있지만 이는 둘이 동일하다는 의미는 아니며 단지 시각적 효과가 동일하다는 의미입니다. v-show:

　

v-if를 사용하면 브라우저가 요소 클래스 tc를 사용하여 div를 렌더링하지 않는다는 것을 알 수 있습니다. 이는 v-if가 판단 조건이 true인 경우에만 브라우저가 생성하기 때문입니다. 브라우징 중에 태그를 지정하고 렌더링합니다. 그렇지 않으면 판단 조건이 false 일 때 브라우저는 태그를 생성하지 않고 렌더링하지 않습니다.

그렇다면 조건이 false일 때는 브라우저가 태그를 생성하지 않고 렌더링하지 않지만 조건이 true일 때는 브라우저가 렌더링만 한다는 점을 생각해 보면 페이지 성능이 많이 소모되지 않나요?

우리의 판단 조건이 하나의 시나리오가 아닌 여러 시나리오라면 어떨까요? 그럼 이제 우리는 무엇을 해야 할까요? Vue는 v-else 명령어를 제공합니다. v-else는 v-if와 함께만 사용할 수 있습니다.

　　

v-show를 판단 렌더링에 사용하는 경우 그런 다음 div 내부의 태그와 img가 생성되고 렌더링되지만 브라우저가 인라인 스타일에 display:none 속성을 추가한 것을 확인했습니다. 따라서 실제로 v-show 태그가 존재하지만 브라우저는 이를 숨깁니다. 그게 전부입니다.

사실 브라우저는 판단 조건에 따라 인라인 스타일만 변경합니다. 조건이 false이면 인라인 스타일이 표시됩니다.

v-show 실제 v-show는 DOM 요소를 추가하거나 삭제하지 않고 동적으로 스타일을 변경하기 때문에 v-if보다 성능이 높습니다. 그러나 v-show는 다양한 분기 판단이 발생할 때 v-else와 함께 사용할 수 없습니다. 이 시나리오에서 v-show를 사용하는 방법은 v-show를 재사용하여 또 다른 논리적 판단을 작성하는 것입니다.

차이점 요약:

1. 판단 조건 DOM 요소를 추가하고 삭제하기 위해 v-show는 판단 조건에 따라 요소를 동적으로 표시하고 숨깁니다. DOM 작업을 자주 추가하고 삭제하면 페이지 로딩 속도와 성능에 영향을 미칩니다.

언제든지. 프로젝트 프로그램이 그다지 크지 않은 경우 v-if와 v-show를 모두 사용하여 표시 및 숨기기를 판단할 수 있습니다(이 시나리오에서 v-if를 사용하면 영향이 거의 없고 영향이 전혀 없습니다). 상대적으로 큼 v-if를 사용하여 표시 및 숨기기를 판단하는 경우 v-show를 사용하는 것이 좋습니다.

2. v-if 전환에는 로컬 컴파일/제거 프로세스가 있으며 전환 프로세스 중에 내부 이벤트가 적절하게 소멸 및 재구성됩니다. 리스너 및 하위 구성 요소; v-show는 단순한 CSS 기반 스위치입니다.

3. v-if는 초기 조건이 false인 경우에만 로컬로 시작됩니다. 컴파일(컴파일이 캐시됨? 컴파일이 캐시된 후 전환 시 부분적으로 언로드됨) v-show는 모든 조건(첫 번째 조건이 true인지 여부)에서 컴파일된 다음 캐시되고 DOM 요소는 유지됨;

4. v-if는 전환 비용이 더 높습니다.

잦은 전환이 필요한 경우에는 v-show를 사용하는 것이 좋습니다. 동작 조건이 거의 변하지 않으면 v-if를 사용하는 것이 좋습니다.

5. v-show는 v-if보다 성능이 높습니다.

v-show는 DOM 요소를 추가하거나 삭제하지 않고 동적으로 스타일만 변경할 수 있기 때문입니다. 따라서 프로그램의 규모가 크지 않은 경우에는 v-if와 v-show 사이에 큰 차이가 없습니다. 프로젝트의 규모가 매우 큰 경우 v-show를 더 많이 사용하는 것이 좋습니다. 이로 인해 나중에 브라우저의 성능이 저하됩니다. 운영.

6. v-if는 변경될 가능성이 없는 작동 조건에 적합합니다. v-show는 빈번한 전환에 적합합니다.

관련 추천: "vue.js Tutorial"

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