v-if和v-show的区别，以及不同的使用场景

v-show和v-if的作用和共同点

vue官方文档解释是：

v-show：基于表达式值的真假性，来改变元素的可见性。

v-if：基于表达式值的真假性，来条件性地渲染元素或者模板片段。

 所以，当条件表达式为false或true时，都可以直观的观看到页面的显示与隐藏。

v-show和v-if的区别和原理

#v-show

原理

元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置display：none的样式，所以是通过修改元素的CSS属性(display)来决定实现显示还是隐藏。

优劣

• v-show是基于css的切换，所以在需要频繁切换（选项卡、折叠面板等）的业务场景下，他的切换开销会更优于v-if
• v-show只是更改了dom的css样式，因此，在“很多搜索结果的页面“等场景下，使用v-show来切换页面，是可以保持页面的滚动条状态的（保持当前页面滚动条位置，在切换回页面时，还在当前位置）并且还可以保留已请求到的数据，以便在切换页面的时候重复请求数据，增大服务端接口压力。但是v-if则会将dom全部清楚，重新渲染。

#v-if

原理

v-if是一种条件渲染指令，它会根据表达式的值来插入或删除元素。当表达式的值为真时，元素会被插入到DOM树中，否则会从DOM树中删除。即v-if显示隐藏是将真实dom元素添加或删除。

优劣

• v-if是真正的条件渲染，元素会被完全销毁和重建，并且是惰性的，即如果初始条件为false，则不会被渲染，直到条件变为true。而v-show则是将dom全部渲染，因此v-if具有更小的初始渲染开销。
• v-if还支持 <template> 标签，可以用于公共组件插槽等的判断，可以用于分组多个元素，而v-show不支持<template>标签
• 可以与v-else，v-else-if搭配使用

使用场景

• 如果需要频繁切换（如选项卡、折叠面板等），使用 v-show

• 如果运行时条件很少改变，或者需要条件分支逻辑，使用 v-if

• 如果元素包含大量子组件或需要重新初始化状态，v-if 可能是更好的选择

容易造成bug的场景

表单元素不要使用v-show，因为当提交校验时，被v-show隐藏的元素其dom还存在，所以点击提交会校验已隐藏的元素，造成逻辑漏洞。

v-show 切换时不会触发组件的生命周期，v-if由于改变了页面的DOM，所以会触发被隐藏组件的钩子函数