v-show和v-if的區別 及應用場景
一、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 ) } } }) } )
四、v-show與v-if的使用場景
v-if
與 v-show
都能控制dom
元素在頁面的顯示
v-if
相比 v-show
開銷更大的(直接操作dom
節點增加與刪除)
- 如果需要非常頻繁地切換,則使用 v-show 較好
- 如果在運行時條件很少改變,則使用 v-if 較好
到此這篇關於v-show和v-if的區別 及應用場景的文章就介紹到這瞭,更多相關v-show和v-if 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!