比較一下Vue指令v-show 和 v-if，聊聊使用場景

這篇文章比較一下Vue指令v-show 和v-if，介紹一下v-show 和v-if 的差別，並聊聊v-show 和v-if 使用場景，希望對大家有幫助！

一、v-show 和v-if 的區別

• 在vue 中v-show 和v-if 都可以控制元素是否在頁面中現實。

• v-show 的顯示隱藏是操作元素css的display 屬性，所以使用v-show 來隱藏元素的時候，元素的dom 節點依舊還在頁面中；v-if的顯示隱藏則是將dom 元素整個新增或刪除。 【相關推薦：vuejs影片教學】

• v-if 的切換有一個局部編譯/卸載的過程，切換過程中適當地銷毀和重建內部的事件監聽和子元件；v-show 只是簡單的操作css的display 屬性。

• v-if 是真正的條件渲染，它會確保在切換過程中條件區塊內的事件監聽器和子元件適當地被銷毀和重建。只有渲染條件為假時，不做操作，直到為真才渲染。

• v-show 由false 變成true 的時候不會觸發元件的生命週期，v-if 由false 變成true的時候，觸發元件的beforeCreate 、 create 、 beforeMount 、 mounted 生命週期鉤子，由true 變成false 的時候觸發組件的beforeDestory 、destoryed 方法。

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

二、v-show 和v-if 使用場景

• #v-if 與 v-show 都能控制dom 元素在頁的顯示和隱藏

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

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

• # v-show 不管是true 還是false，元素總是會被渲染，源碼中如果綁定了v-show 指令的元素外層套了一層transition 的話，就執行transition ，如果el 外層沒有嵌套transition 的話，就直接設定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教學、web前端）

以上是比較一下Vue指令v-show 和 v-if，聊聊使用場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！