Vue 지침 v-show와 v-if를 비교하고 사용 시나리오에 대해 이야기해 보세요.

이 글은 Vue 명령인 v-show와 v-if를 비교하고, v-show와 v-if의 차이점을 소개하며, v-show와 v-if의 사용 시나리오에 대해 이야기하는 데 도움이 되기를 바랍니다. 모두에게!

1. v-show와 v-if의 차이점

• vue에서는 v-show와 v-if 모두 요소가 페이지에 표시되는지 여부를 제어할 수 있습니다.

• v-show의 표시 및 숨기기는 CSS 요소의 표시 속성을 조작하는 것이므로 v-show를 사용하여 요소를 숨길 때 요소의 dom 노드가 여전히 페이지에 표시되고 숨겨집니다. v-if의 dom 요소 전체 추가 또는 삭제를 숨기는 것입니다. [관련 권장사항: vuejs 비디오 튜토리얼]

• v-if 전환에는 부분 컴파일/제거 프로세스가 있습니다. 전환 프로세스 중에 내부 이벤트 리스너와 하위 구성 요소가 적절하게 삭제되고 다시 빌드됩니다. 단순한 CSS 표시 속성입니다.

• v-if는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 전환 중에 적절하게 삭제되고 다시 생성되도록 보장하는 진정한 조건부 렌더링입니다. 렌더링 조건이 false인 경우에만 아무 작업도 수행하지 않으며, true가 될 때까지 렌더링되지 않습니다.

• v-show는 false에서 true로 변경될 때 구성 요소의 라이프 사이클을 트리거하지 않습니다. v-if가 false에서 true로 변경되면 구성 요소의 beforeCreate, create, beforeMount 및 탑재된 라이프 사이클 후크가 트리거됩니다. true에서 false로 변경되면 해당 구성 요소의 beforeDestory 및 destroy 메소드가 트리거됩니다.

• 성능 소모 측면에서 v-if의 스위칭 소모가 더 높고, v-show의 초기 렌더링 소모가 더 높습니다.

2. v-show 및 v-if의 사용 시나리오

• v-if 및 v-show는 v-if와 비교하여 페이지에서 dom 요소의 표시 및 숨기기를 제어할 수 있습니다. showoverhead 큰 경우(dom 노드의 추가 및 삭제를 직접 조작), 매우 자주 전환해야 하는 경우 v-show를 사용하는 것이 좋습니다. 런타임 중에 조건이 거의 변경되지 않으면 v-if를 사용하는 것이 좋습니다.

• 3. v-show 및 v-if

v-show의 원리 분석 true 또는 false에 관계없이 요소가 v-show 명령어에 바인딩된 경우 항상 렌더링됩니다. 소스 코드에는 전환 레이어가 포함되어 있어 전환을 실행합니다. el의 외부 레이어에 중첩된 전환이 없으면 el.style.display

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === &#39;none&#39; ? &#39;&#39; : el.style.display
    if (transition && value) {
      transition.beforeEnter(el)
    } else {
      setDisplay(el, value)
    }
  },
  mounted(el, { value }, { transition }) {
    if (transition && value) {
      transition.enter(el)
    }
  },
  updated(el, { value, oldValue }, { transition }) {
    // ...
  },
  beforeUnmount(el, { value }) {
    setDisplay(el, value)
  }
}

• v-if를 직접 설정하여 판단합니다. 추상 구문 트리는 코드 문자열로 변환됩니다. v -if가 false인 경우 렌더링 함수에 의해 생성된 vnode에는 렌더링할 노드가 포함되지 않지만 주석이 달린 vnode 노드가 자리 표시자로 포함됩니다

export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
    return processIf(node, dir, context, (ifNode, branch, isRoot) => {
      // ...
      return () => {
        if (isRoot) {
          ifNode.codegenNode = createCodegenNodeForBranch(
            branch,
            key,
            context
          ) as IfConditionalExpression
        } else {
          // attach this branch's codegen node to the v-if root.
          const parentCondition = getParentCondition(ifNode.codegenNode!)
          parentCondition.alternate = createCodegenNodeForBranch(
            branch,
            key + ifNode.branches.length - 1,
            context
          )
        }
      }
    })
  }
)

(동영상 공유 학습 :
• vuejs 튜토리얼
,

웹 프론트엔드

)

위 내용은 Vue 지침 v-show와 v-if를 비교하고 사용 시나리오에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!