vue의 v-show와 v-if를 어떻게 구분합니까

1. v-show
초기 조건이 무엇이든지 간에 요소는 항상 렌더링되고 CSS display: none 또는display: block의 속성을 기반으로 간단하게 전환됩니다.
2. v-if
초기 조건 (데이터에 정의된 데이터) 에 따라 진정한 렌더링 (구성 요소의 진정한 삭제와 재구성) 을 하고, 조건이 사실이면 조건 블록을 렌더링하기 시작하며, 조건이 가짜면 조건 블록을 렌더링하지 않습니다.
주의: v-if는 v-for와 함께 사용하지 마세요!
v-for와 함께 사용할 때 v-for의 우선순위가 v-if보다 높습니다. vue 홈페이지에서 v-for에 대한 상세한 설명을 보십시오. 왜 같이 사용할 수 없는지 코드로 설명해 드리겠습니다.

<ul>
 <li
 v-for = "(item, index) in list"
 v-if = "isActive"
 :key = "item.id"
 >
 {{ item.name }}
 </li>
</ul>

상기 코드는 다음과 같은 연산을 거칠 것이다

this.list.map( user=> {
 if (isActive) {
 return user.name
 }
})

따라서 우리가 일부 요소만 과장하더라도 isActive 변화가 있든 없든 다시 과장할 때마다 전체 목록을 훑어봐야 한다. list 의 데이터가 많으면 성능이 낮아져 페이지가 끊길 수 있습니다.
총결산
공통점:
v-if와 v-show는 귀속 데이터의true\false를 판단하여 보여줍니다
차이점:
v-if는true로 판단될 때만 데이터를 렌더링하고false는 포함된 코드를 삭제합니다.데이터 렌더링을 다시 하지 않으면 v-if가 다시 판단됩니다.사용법은 데이터에 대한 한 번의 조작에 비교적 경향이 있다고 할 수 있다.
v-show는 판단이 무엇이든지 데이터에 대해 먼저 렌더링을 하고false일 때 노드에 대해display:none를 한다.를 참조하십시오.따라서 데이터를 다시 렌더링하지 않는 상황에서 데이터의 값을 바꾸면 데이터를 보여주거나 숨길 수 있다.
권장 사항:
v-if는 권한이 있는 작업에 더욱 적합하고 렌더링할 때 권한 데이터를 판단하고 있으면 이 기능을 보여주고 없으면 삭제합니다.
v-show는 일상적인 사용에 더욱 적합하고 데이터의 렌더링을 줄이고 불필요한 조작을 줄일 수 있다.
종합적으로 말하면 v-if는 더욱 높은 전환 소모가 있고 v-show는 더욱 높은 초기 렌더링 소모가 있다.
따라서 v-show를 빈번하게 전환해야 하는 것이 좋으며 실행할 때 조건이 바뀌지 않고 기능 권한성을 선호하면 v-if가 좋다.
이상은 vue의 v-show와 v-if의 상세한 내용을 어떻게 구분하는지입니다. v-show와 v-if에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!