面試必問之v-if和v-show的區(qū)別是什么贺拣？
v-if
- v-if是動態(tài)的向DOM添加或刪除元素
- v-if在false的情況下獲取不到DOM元素，不占位
- v-if是真正的條件渲染盯腌，不滿足條件時DOM直接被刪除
v-show
- 給DOM加上v-show="false" 則會在DOM上加上一個內(nèi)聯(lián)樣式style="display: none;"不占位渊跋，布局塌陷。
<div style="display: none;">123</div>
- 如果有class或者id定義了外部樣式客们，則設(shè)置v-show= "true" 無效
<!--此時div還是處于display: none;狀態(tài)-->
<div class="test" v-show= "true">123</div>
.test{
display: none;
}
- v-show只改變內(nèi)聯(lián)樣式
<!--此時DOM正常顯示-->
<div v-show="true" style="display: none"></div>
- v-show="false"時還可以獲取到DOM底挫，其自身與后代節(jié)點(diǎn)不再生成盒模型以占位建邓，且重寫子節(jié)點(diǎn)display屬性無效官边，但html節(jié)點(diǎn)并沒有真的被刪除。
當(dāng)你說到這里，面試官開始進(jìn)行死亡追問：那么他們和visibility有什么區(qū)別惑灵？
動態(tài)綁定visibility泣棋，通過修改“visibility”屬性實現(xiàn)顯示切換潭辈，也可實現(xiàn)不同條件顯示和隱藏的功能
- visibility:hidden可讓元素生成不可見盒把敢，元素雖不可見谅辣，但仍生成盒模型蚣录，保持占位，布局不塌陷虐杯，綁定的事件失效。
- 子元素默認(rèn)繼承父元素visibility屬性，但子元素若重寫屬性設(shè)置visibility：visible休弃，則不受父級影響，子元素可見，并且這時綁定在父元素上的事件在子元素上可觸發(fā)得湘。
和opacity的區(qū)別呢淘正？
- opacity屬性僅改變元素的透明度惩淳，不影響元素的占位思犁。
- opacity屬性不可繼承，但父元素的opacity會影響后代托呕。后代元素的opacity取最小值顯示任洞。若 父元素opacity為0发侵，后代為1，則0生效挪鹏。若父元素為1禀苦，后代為0.5，則0.5生效遂鹊。且opacity屬性不影響事件觸發(fā)伦忠，即opacity為0時，事件綁定仍有效稿辙。
