面试必问之v-if和v-show的区别是什么？
v-if
- v-if是动态的向DOM添加或删除元素
- v-if在false的情况下获取不到DOM元素，不占位
- v-if是真正的条件渲染，不满足条件时DOM直接被删除
v-show
- 给DOM加上v-show="false" 则会在DOM上加上一个内联样式style="display: none;"不占位，布局塌陷。
<div style="display: none;">123</div>
- 如果有class或者id定义了外部样式，则设置v-show= "true" 无效
<!--此时div还是处于display: none;状态-->
<div class="test" v-show= "true">123</div>
.test{
display: none;
}
- v-show只改变内联样式
<!--此时DOM正常显示-->
<div v-show="true" style="display: none"></div>
- v-show="false"时还可以获取到DOM，其自身与后代节点不再生成盒模型以占位，且重写子节点display属性无效，但html节点并没有真的被删除。
当你说到这里，面试官开始进行死亡追问：那么他们和visibility有什么区别？
动态绑定visibility，通过修改“visibility”属性实现显示切换，也可实现不同条件显示和隐藏的功能
- visibility:hidden可让元素生成不可见盒，元素虽不可见，但仍生成盒模型，保持占位，布局不塌陷，绑定的事件失效。
- 子元素默认继承父元素visibility属性，但子元素若重写属性设置visibility：visible，则不受父级影响，子元素可见，并且这时绑定在父元素上的事件在子元素上可触发。
和opacity的区别呢？
- opacity属性仅改变元素的透明度，不影响元素的占位。
- opacity属性不可继承，但父元素的opacity会影响后代。后代元素的opacity取最小值显示。若 父元素opacity为0，后代为1，则0生效。若父元素为1，后代为0.5，则0.5生效。且opacity属性不影响事件触发，即opacity为0时，事件绑定仍有效。
