1. 相同点：
v-if和v-show都能控制元素的显示和隐藏。
2. 不同点：
（1）实现本质方法不同 ;
（2）v-show本质是通过设置css中的display属性为none，控制隐藏 ;
（3） v-if是动态的向DOM树内添加或者删除DOM元素。
3. 编译的区别：
v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件。
4. 编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也会编译了 v-if初始值为false，就不会进行编译。
5. 性能比较：
v-show只编译一次，后面其实就是控制css，而v-if不同的销毁和创建，所以v-show性能更好一点。
注意点：因为v-show实际上操作display：“”或者none，当css本身有display：none时，v-show无法让其显示。
总结： 如果要频繁切换某节点时，使用v-show(无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大);如果不需要频繁切换某节点时，使用v-if(因为懒加载，初始为false时，不会渲染，但是因为它是通过添加或者删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销较大)
代码演示：
<div class="settings-container">
<div class="app-container">
<el-card>
<el-dialog
title="提示"
v-if="showDialog"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
</el-dialog>
</el-card>
<button @click="fn">显示/隐藏</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showDialog:false // 初始值为false，关闭状态
}
},
methods:{
// 绑定点击事件,点击按钮时，显示弹框
fn() {
this.showDialog = true
}
}
}
</script>
