搜尋
首頁web前端Vue.js比較一下Vue指令v-show 和 v-if,聊聊使用場景

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

比較一下Vue指令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&#39;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中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
VUE.JS與React:JavaScript框架的比較分析VUE.JS與React:JavaScript框架的比較分析Apr 30, 2025 am 12:10 AM

Vue.js和React各有優缺點,選擇時需綜合考慮團隊技能、項目規模和性能需求。 1)Vue.js適合快速開發和小型項目,學習曲線低,但深層嵌套對象可能導致性能問題。 2)React適用於大型和復雜應用,生態系統豐富,但頻繁更新可能導致性能瓶頸。

vue.js vs.反應:用例和應用程序vue.js vs.反應:用例和應用程序Apr 29, 2025 am 12:36 AM

Vue.js適合小型到中型項目,React適合大型項目和復雜應用場景。 1)Vue.js易於上手,適用於快速原型開發和小型應用。 2)React在處理複雜狀態管理和性能優化方面更有優勢,適合大型項目。

VUE.JS與React:比較性能和效率VUE.JS與React:比較性能和效率Apr 28, 2025 am 12:12 AM

Vue.js和React各有優勢:Vue.js適用於小型應用和快速開發,React適合大型應用和復雜狀態管理。 1.Vue.js通過響應式系統實現自動更新,適用於小型應用。 2.React使用虛擬DOM和diff算法,適合大型和復雜應用。選擇框架時需考慮項目需求和團隊技術棧。

vue.js vs.反應:社區,生態系統和支持vue.js vs.反應:社區,生態系統和支持Apr 27, 2025 am 12:24 AM

Vue.js和React各有優勢,選擇應基於項目需求和團隊技術棧。 1.Vue.js社區友好,提供豐富學習資源,生態系統包括VueRouter等官方工具,支持由官方團隊和社區提供。 2.React社區偏向企業應用,生態系統強大,支持由Facebook及其社區提供,更新頻繁。

React和Netflix:探索關係React和Netflix:探索關係Apr 26, 2025 am 12:11 AM

Netflix使用React來提升用戶體驗。 1)React的組件化特性幫助Netflix將復雜UI拆分成可管理模塊。 2)虛擬DOM優化了UI更新,提高了性能。 3)結合Redux和GraphQL,Netflix高效管理應用狀態和數據流動。

vue.js vs.後端框架:澄清區別vue.js vs.後端框架:澄清區別Apr 25, 2025 am 12:05 AM

Vue.js是前端框架,後端框架用於處理服務器端邏輯。 1)Vue.js專注於構建用戶界面,通過組件化和響應式數據綁定簡化開發。 2)後端框架如Express、Django處理HTTP請求、數據庫操作和業務邏輯,運行在服務器上。

vue.js和前端堆棧:了解連接vue.js和前端堆棧:了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成,提升開發效率和用戶體驗。 1)構建工具:與Webpack、Rollup集成,實現模塊化開發。 2)狀態管理:與Vuex集成,管理複雜應用狀態。 3)路由:與VueRouter集成,實現單頁面應用路由。 4)CSS預處理器:支持Sass、Less,提升樣式開發效率。

Netflix:探索React(或其他框架)的使用Netflix:探索React(或其他框架)的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面,因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1)組件化設計讓Netflix將界面分解成可管理的小組件,提高了開發效率和代碼可維護性。 2)虛擬DOM機制通過最小化DOM操作,確保了Netflix用戶界面的流暢性和高性能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!