您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“v-show和v-if怎么應(yīng)用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“v-show和v-if怎么應(yīng)用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
我們都知道在 vue
中 v-show
與 v-if
的作用效果是相同的(不含v-else),都能控制元素在頁面是否顯示
在用法上也是相同的:
<Model v-show="isShow" /> <Model v-if="isShow" />
當(dāng)表達(dá)式為true
的時候,都會占據(jù)頁面的位置
當(dāng)表達(dá)式都為false
時,都不會占據(jù)頁面位置
控制手段不同
編譯過程不同
編譯條件不同
控制手段:v-show
隱藏則是為該元素添加css--display:none
,dom
元素依舊還在。v-if
顯示隱藏是將dom
元素整個添加或刪除
編譯過程:v-if
切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件;v-show
只是簡單的基于css切換
編譯條件:v-if
是真正的條件渲染,它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。只有渲染條件為假時,并不做操作,直到為真才渲染
v-show
由false
變?yōu)?code>true的時候不會觸發(fā)組件的生命周期
v-if
由false
變?yōu)?code>true的時候,觸發(fā)組件的beforeCreate
、create
、beforeMount
、mounted
鉤子,由true
變?yōu)?code>false的時候觸發(fā)組件的beforeDestory
、destoryed
方法
性能消耗:v-if
有更高的切換消耗;v-show
有更高的初始渲染消耗;
具體解析流程這里不展開講,大致流程如下:
將模板template
轉(zhuǎn)為ast
結(jié)構(gòu)的JS
對象
用ast
得到的JS
對象拼裝render
和staticRenderFns
函數(shù)
render
和staticRenderFns
函數(shù)被調(diào)用后生成虛擬VNODE
節(jié)點,該節(jié)點包含創(chuàng)建DOM
節(jié)點所需信息
vm.patch
函數(shù)通過虛擬DOM
算法利用VNODE
節(jié)點創(chuàng)建真實DOM
節(jié)點
不管初始條件是什么,元素總是會被渲染
我們看一下在vue
中是如何實現(xiàn)的
代碼很好理解,有transition
就執(zhí)行transition
,沒有就直接設(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
在實現(xiàn)上比v-show
要復(fù)雜的多,因為還有else
else-if
等條件需要處理,這里我們也只摘抄源碼中處理 v-if
的一小部分
返回一個node
節(jié)點,render
函數(shù)通過表達(dá)式的值來決定是否生成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-if
與 v-show
都能控制dom
元素在頁面的顯示
v-if
相比 v-show
開銷更大的(直接操作dom
節(jié)點增加與刪除)
如果需要非常頻繁地切換,則使用 v-show 較好
如果在運行時條件很少改變,則使用 v-if 較好
讀到這里,這篇“v-show和v-if怎么應(yīng)用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。