v-show和v-if的區別及應用場景

2022-06-19 18:00:32

一、v-show與v-if的共同點

我們都知道在 vue 中 v-show 與 v-if 的作用效果是相同的(不含v-else)，都能控制元素在頁面是否顯示

在用法上也是相同的：

<Model v-show="isShow" />
<Model v-if="isShow" />

當表示式為true的時候，都會佔據頁面的位置
當表示式都為false時，都不會佔據頁面位置

二、v-show與v-if的區別

控制手段不同
編譯過程不同
編譯條件不同
控制手段：v-show隱藏則是為該元素新增css--display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個新增或刪除
編譯過程：v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件；v-show只是簡單的基於css切換
編譯條件：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原理分析

具體解析流程這裡不展開講，大致流程如下：

將模板template轉為ast結構的JS物件
用ast得到的JS物件拼裝render和staticRenderFns函數
render和staticRenderFns函數被呼叫後生成虛擬VNODE節點，該節點包含建立DOM節點所需資訊
vm.patch函數通過虛擬DOM演演算法利用VNODE節點建立真實DOM節點

v-show原理

不管初始條件是什麼，元素總是會被渲染

我們看一下在vue中是如何實現的

程式碼很好理解，有transition就執行transition，沒有就直接設定display屬性

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts
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原理

v-if在實現上比v-show要複雜的多，因為還有else else-if 等條件需要處理，這裡我們也只摘抄原始碼中處理 v-if 的一小部分

返回一個node節點，render函數通過表示式的值來決定是否生成DOM

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts
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
          )
        }
      }
    })
  }
)