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 切り替えには部分的なコンパイル/アンインストール プロセスがあります。切り替えプロセス中、内部イベント リスニングとサブv-showはcssのdisplay属性を操作するだけです。

• v-if は true の条件付きレンダリングです。これにより、条件付きブロック内のイベント リスナーとサブコンポーネントが、切り替え中に適切に破棄され、再作成されます。レンダリング条件が false の場合にのみ操作は実行されず、true になるまでレンダリングされません。

• v-show は、false から true に変更されるときにコンポーネントのライフサイクルをトリガーしません。v-if が false から true に変更されると、コンポーネントの beforeCreate、create、beforeMount がトリガーされます。 , マウントされたライフサイクルフックは、コンポーネントが true から false に変わると、コンポーネントの beforeDestory メソッドと破棄されたメソッドをトリガーします。

• パフォーマンス消費量の点では、v-if はスイッチング消費量が多く、v-show は初期レンダリング消費量が多くなります。

2. v-show と v-if の使用シナリオ

• v-if と v-show はどちらも dom の配置を制御できます。ページ上の要素。表示と非表示

• v-if は、v-show (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 の場合、render 関数によって生成された 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 チュートリアル、webfrontend)

以上がVue の命令 v-show と v-if を比較し、使用シナリオについて説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。