vue中如何使用v-show復(fù)用DOM

小編給大家分享一下vue中如何使用v-show復(fù)用DOM，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用 v-show 復(fù)用 DOM

v-show：是渲染組件，然后改變組件的 display 為 block 或 none  v-if：是渲染或不渲染組件

所以對(duì)于可以頻繁改變條件的場(chǎng)景，就使用 v-show 節(jié)省性能，特別是 DOM 結(jié)構(gòu)越復(fù)雜收益越大

不過(guò)它也有劣勢(shì)，就是 v-show 在一開始的時(shí)候，所有分支內(nèi)部的組件都會(huì)渲染，對(duì)應(yīng)的生命周期鉤子函數(shù)都會(huì)執(zhí)行，而 v-if 只會(huì)加載判斷條件命中的組件，所以需要根據(jù)不同場(chǎng)景使用合適的指令

比如下面的用 v-show 復(fù)用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 當(dāng)條件變化的時(shí)候，觸發(fā) diff 更新，發(fā)現(xiàn)新舊 vnode 不一致，就會(huì)移除整個(gè)舊的 vnode，再重新創(chuàng)建新的 vnode，然后創(chuàng)建新的 my-components 組件，又會(huì)經(jīng)歷組件自身初始化，render，patch 等過(guò)程，而 v-show 在條件變化的時(shí)候，新舊 vnode 是一致的，就不會(huì)執(zhí)行移除創(chuàng)建等一系列流程

以上是“vue中如何使用v-show復(fù)用DOM”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！