溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue中如何使用v-show復用DOM，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
v-show：是渲染組件，然后改變組件的 display 為 block 或 none v-if：是渲染或不渲染組件
所以對于可以頻繁改變條件的場景，就使用 v-show 節省性能，特別是 DOM 結構越復雜收益越大
不過它也有劣勢，就是 v-show 在一開始的時候，所有分支內部的組件都會渲染，對應的生命周期鉤子函數都會執行，而 v-if 只會加載判斷條件命中的組件，所以需要根據不同場景使用合適的指令
比如下面的用 v-show 復用DOM，比 v-if/v-else 效果好
<template> <div> <div v-show="status" class="on"> <my-components /> </div> <section v-show="!status" class="off"> <my-components > </section> </div> </template>
原理就是使用 v-if 當條件變化的時候，觸發 diff 更新，發現新舊 vnode 不一致，就會移除整個舊的 vnode，再重新創建新的 vnode，然后創建新的 my-components 組件，又會經歷組件自身初始化，render，patch 等過程，而 v-show 在條件變化的時候，新舊 vnode 是一致的，就不會執行移除創建等一系列流程
以上是“vue中如何使用v-show復用DOM”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
