vue.js 2에서 v-if를 사용하는 것과 v-show를 사용하는 것 중 어떤 것이 더 좋습니까?

vue.js 2에서 v-if를 사용하는 것과 v-show를 사용하는 것 중 어떤 것이 더 좋습니까?

vue 2 프로젝트를 진행하고 있습니다.어떤 경우에 성능이 더 나은지 알아야 합니다.v-if 또는 v-show를 사용하시겠습니까?긴 목록이 있고 각 항목의 목록에는 숨김 양식이 있으며 각 항목 목록이 있는 버튼을 클릭하기 위해 표시 및 숨김이 필요합니다.v-show의 클래스 전환과 v-if로 양식 추가 및 제거 중 어떤 것이 더 좋습니까?

dr;dr

퍼포먼스에 관한 질문이라고 가정합니다.

• v-show: 비싼 초기 로드, 저렴한 전환,
• v-if: 저렴한 초기 부하, 비싼 전환.

---

Evan VueJS 포럼에서 보다 상세한 답변을 제공했습니다.

v-show는 항상 모든 것을 컴파일하고 렌더링합니다.단순히 "display: none" 스타일을 요소에 추가합니다.초기 부하 비용은 높지만 토글링은 매우 저렴합니다.

비교하자면, v-if는 실제로 조건부입니다. v-if는 느리기 때문에 초기 조건이 false이면 아무것도 수행하지 않습니다.이것은 초기 로드 시간에 적합합니다.조건이 참이면 v-if가 해당 컨텐츠를 컴파일하고 렌더링합니다.v-if 블록을 전환하면 v-if 내부의 구성 요소가 완전히 삭제되었다가 전환되면 다시 생성되므로 큰 v-if 블록을 전환하면 v-show보다 비용이 더 많이 들 수 있습니다.

간단한 답변:

사용하다v-if상태가 그렇게 자주 바뀌지 않는다면요.

사용하다v-show상태를 더 자주 전환하려면 이 옵션을 선택합니다.

주의:v-show조건이 false일 경우 DOM에서 요소를 삭제하지 않습니다.그래서 사람들은 당신의 페이지를 볼 때 그것을 볼 수 있습니다.

v-if'를 추가하면 요소를 수정하는 대신 요소를 DOM에서 연결 및 연결 해제하기 때문에 예기치 않은 결과가 발생할 수 있습니다.

예를 들어 폼에서 이 옵션을 사용하고 v-if를 사용하여 해당 폼을 해제하면 다음과 같은 브라우저 콘솔 주의가 표시됩니다.

    “Form submission canceled because the form is not connected”

v-show'를 사용하면 이 문제가 발생하지 않습니다.

v-show는, CSS 의 표시 속성( 「없음」또는 「블록」)만을 토글 합니다.사용할 때v-showHTML DOM은 페이지에만 표시됩니다("표시" 속성).

하지만 우리가 어디에v-if페이지에서 전체 DOM을 삭제하거나 조건에 따라 전체 DOM을 다시 작성합니다.

이 예를 확인해 주세요.

<p v-if="ok">If Check</p>
<p v-show="ok">Show Check</p> //try to set "ok" by true and false and inspect HTML

브이쇼

DOM의 모든 요소를 동시에 로드/로드하고 값이 false v-show="false"인 경우 요소의 표시를 "없음"으로 설정합니다.

V-if

조건이 충족될 때까지 요소를 로드/렌더하지 않고 조건이 충족될 때 요소를 렌더링합니다.

한 css v-if: 표시 가능한 css attribute.v-if: 표시 가능한 css attribute.v-if.v-show: 표시 가능한 css attibute.v-f.v-show: 표시 css ada.
v-show」의 경우는로드 시간 )를 합니다.그렇지 않으면 v-if(css 비용이 초기 로드 시간이 소요되므로)를 사용합니다.

언급URL : https://stackoverflow.com/questions/42419192/what-is-better-in-vue-js-2-use-v-if-or-v-show