一、v-show與v-if的共同點(diǎn)

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

在用法上也是相同的：

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

• 當(dāng)表達(dá)式為true的時(shí)候，都會(huì)占據(jù)頁(yè)面的位置
• 當(dāng)表達(dá)式都為false時(shí)，都不會(huì)占據(jù)頁(yè)面位置

二、v-show與v-if的區(qū)別

• 控制手段不同
• 編譯過(guò)程不同
• 編譯條件不同
• 控制手段：v-show隱藏則是為該元素添加css--display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個(gè)添加或刪除
• 編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件；v-show只是簡(jiǎn)單的基于css切換
• 編譯條件：v-if是真正的條件渲染，它會(huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。只有渲染條件為假時(shí)，并不做操作，直到為真才渲染
  • v-show 由false變?yōu)?code>true的時(shí)候不會(huì)觸發(fā)組件的生命周期
  • v-if由false變?yōu)?code>true的時(shí)候，觸發(fā)組件的beforeCreate、create、beforeMount、mounted鉤子，由true變?yōu)?code>false的時(shí)候觸發(fā)組件的beforeDestory、destoryed方法
• 性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

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

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

• 將模板template轉(zhuǎn)為ast結(jié)構(gòu)的JS對(duì)象
• 用ast得到的JS對(duì)象拼裝render和staticRenderFns函數(shù)
• render和staticRenderFns函數(shù)被調(diào)用后生成虛擬VNODE節(jié)點(diǎn)，該節(jié)點(diǎn)包含創(chuàng)建DOM節(jié)點(diǎn)所需信息
• vm.patch函數(shù)通過(guò)虛擬DOM算法利用VNODE節(jié)點(diǎn)創(chuàng)建真實(shí)DOM節(jié)點(diǎn)

v-show原理

不管初始條件是什么，元素總是會(huì)被渲染

我們看一下在vue中是如何實(shí)現(xiàn)的

代碼很好理解，有transition就執(zhí)行transition，沒(méi)有就直接設(shè)置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在實(shí)現(xiàn)上比v-show要復(fù)雜的多，因?yàn)檫€有else else-if 等條件需要處理，這里我們也只摘抄源碼中處理 v-if 的一小部分

返回一個(gè)node節(jié)點(diǎn)，render函數(shù)通過(guò)表達(dá)式的值來(lái)決定是否生成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
          )
        }
      }
    })
  }
)

四、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 較好

到此這篇關(guān)于v-show和v-if的區(qū)別 及應(yīng)用場(chǎng)景的文章就介紹到這了,更多相關(guān)v-show和v-if 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論