首先它两都是用作于条件渲染但他们有如下区别
1.初始化渲染：
v-if只有当条件为真的时候，元素才会渲染到页面，只要初始化条件为假的话就不会渲染到页面中去,其实v-if才是真正的条件渲染，因为每次显示与隐藏都会在dom数中新增或删除dom,这样就会导致子组件或元素或事件监听器也跟着重建或销毁，而v-show则不是，它的条件发生改变时其不会触发组件的生命周期的改变。
v-show在初始化的过程中无论真假条件都会被渲染到dom中，只不过他会通过控制css样式的display:none去控制元素的显示与隐藏。
2.响应式
v-if 当条件发生变化的时候会根据条件进行求值判断是否显示与隐藏，但是它的显示与隐藏会重新渲染或者销毁dom.
v-show 当条件发生变化时不会重新渲染或者销毁dom。
3.渲染开销
v-if 当条件为假的时候，元素不会被渲染到dom,也就是说此时相对v-show 无论显示与隐藏与否都会生成dom，只是通过样式去控制，这样来说是v-if节省了许多的开销
4.适用条件
v-if适合运行条件很少改变的情况； v-show适合频繁切换的情况。
二。display:none 与visibility：none的区别
"display: none"和"visibility: hidden"都是用于隐藏元素的CSS属性，但它们之间有一些区别。
-
显示与占据空间：
- “display: none”：隐藏元素，同时元素在页面中不会占据空间，其他元素会自动填充隐藏元素的位置。
- “visibility: hidden”：隐藏元素，但元素仍然在页面中占据空间，其他元素不会填充隐藏元素的位置。
-
事件触发：
- “display: none”：隐藏元素的同时，会禁用元素上的所有事件和交互，不会响应用户的操作。
- “visibility: hidden”：隐藏元素，但仍然可以触发元素上的事件和交互。
-
子元素的显示：
- “display: none”：隐藏元素及其所有子元素，子元素也不会显示。
- “visibility: hidden”：隐藏元素本身，但子元素会继续显示。