v-show和v-if的區(qū)別?及應用場景
更新時間：2022年06月19日 11:22:52 作者：??前端卷王小y????
這篇文章主要介紹了v-show和v-if的區(qū)別及應用場景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下
一、v-show與v-if的共同點
我們都知道在 vue 中 v-show 與 v-if 的作用效果是相同的(不含v-else)，都能控制元素在頁面是否顯示
在用法上也是相同的：
<Model v-show="isShow" /> <Model v-if="isShow" />
- 當表達式為
true的時候，都會占據(jù)頁面的位置 - 當表達式都為
false時，都不會占據(jù)頁面位置
二、v-show與v-if的區(qū)別
- 控制手段不同
- 編譯過程不同
- 編譯條件不同
- 控制手段：
v-show隱藏則是為該元素添加css--display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個添加或刪除 - 編譯過程：
v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡單的基于css切換 - 編譯條件：
v-if是真正的條件渲染，它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?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有更高的初始渲染消耗；
三、v-show與v-if原理分析
具體解析流程這里不展開講，大致流程如下：
- 將模板
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é)點
v-show原理
不管初始條件是什么，元素總是會被渲染
我們看一下在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原理
v-if在實現(xiàn)上比v-show要復雜的多，因為還有else else-if 等條件需要處理，這里我們也只摘抄源碼中處理 v-if 的一小部分
返回一個node節(jié)點，render函數(shù)通過表達式的值來決定是否生成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節(jié)點增加與刪除）
- 如果需要非常頻繁地切換，則使用 v-show 較好
- 如果在運行時條件很少改變，則使用 v-if 較好
到此這篇關(guān)于v-show和v-if的區(qū)別 及應用場景的文章就介紹到這了,更多相關(guān)v-show和v-if 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue 項目中當訪問路由不存在的時候默認訪問404頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)無限消息無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue表格組件Vxe-table使用技巧的相關(guān)資料,文中還介紹了VXEtable展示指定行所遇到得問題,對大家學習或者使用Vxe-table具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
關(guān)于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項的方式書寫Vue組件,這篇文章主要給大家介紹了關(guān)于Vue組合式API的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇vue導航欄部分的動態(tài)渲染實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關(guān)于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關(guān)資料,需要的朋友可以參考下2022-10-10