Vue指令v-show和v-if怎么使用

本文小編為大家詳細(xì)介紹“Vue指令v-show和v-if怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue指令v-show和v-if怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、v-show 和 v-if 的區(qū)別

• 在 vue 中 v-show 和 v-if 都可以控制元素是否在頁(yè)面中現(xiàn)實(shí)。

• v-show 的顯示隱藏是操作元素css的 display 屬性，所以使用 v-show 來(lái)隱藏元素的時(shí)候，元素的 dom 節(jié)點(diǎn)依舊還在頁(yè)面中；v-if 的顯示隱藏則是將 dom 元素整個(gè)添加或刪除?！鞠嚓P(guān)推薦：vuejs視頻教程】

• v-if 的切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show 只是簡(jiǎn)單的操作css的 display 屬性。

• v-if 是真正的條件渲染，它會(huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。只有渲染條件為假時(shí)，并不做操作，直到為真才渲染。

• v-show 由 false 變?yōu)?true 的時(shí)候不會(huì)觸發(fā)組件的生命周期，v-if 由 false 變?yōu)?true的時(shí)候，觸發(fā)組件的 beforeCreate 、 create 、 beforeMount 、 mounted 生命周期鉤子，由 true 變?yōu)?false 的時(shí)候觸發(fā)組件的 beforeDestory 、destoryed 方法。

• 在性能消耗方面 v-if 有更高的切換消耗； v-show 有更高的初始渲染消耗。

二、v-show 和 v-if 使用場(chǎng)景

• v-if 與 v-show 都能控制 dom 元素在頁(yè)面的顯示和隱藏

• v-if 相比 v-show 開銷更大的（直接操作 dom 節(jié)點(diǎn)增加與刪除），如果需要非常頻繁地切換，則使用 v-show 較好，如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好

三、v-show 和 v-if 原理分析

• v-show 不管是 true 還是 false，元素總是會(huì)被渲染，源碼中如果綁定了 v-show 指令的元素外層套了一層 transition 的話，就執(zhí)行 transition ，如果 el 外層沒有嵌套 transition 的話，就直接設(shè)置 el.style.display

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === 'none' ? '' : 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 是在抽象語(yǔ)法樹轉(zhuǎn)成代碼字符串的時(shí)候被獲取來(lái)做判斷的，如果 v-if 為false ，render 函數(shù)生成的 vnode 不會(huì)包含要渲染的節(jié)點(diǎn)，而是一個(gè)注釋的 vnode 節(jié)點(diǎn)作為占位

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
          )
        }
      }
    })
  }
)

讀到這里，這篇“Vue指令v-show和v-if怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。